您现在的位置:首页 >> 基础 >> Java编程 >> 内容

javascript 中的继承实现, call,apply,prototype,--Java学习网

时间:2016-12-4 22:27:29

  核心提示:javascript中继承可以通过call、apply、protoperty实现1.callcall的含义:foo.call(thisObject, args...)表示函数foo调用的时候,上下文切...
javascript中继承可以通过call、apply、protoperty实现
1.call
call的含义:
foo.call(thisObject, args...)
表示函数foo调用的时候,上下文切换为thisObject,意思是用thisObject来调用foo方法,如果没有指定thisObject,则外部的Global对象被用作默认的thisObject

function foo() {
    if (!this.s_name) { // 避免被this的属性重新赋值
        this.s_name = "inside foo";
    }
    console.info(this.s_name);
}

function bar() {
    if (!this.s_name) {
        this.s_name = "inside bar";
    }
}

var p = new bar();
foo.call(p);// foo函数调用,由于使用了call,其上下文切换成p,foo函数中的this指向p
 
output:inside foo

 
用call来实现继承:

/**
 * Created by Administrator on 2016/12/4 0004.
 */

function Person() {
    this.s_name = "Person"
    this.s_age = undefined;
    this.s_gender = undefined;
    this.f_say = function (txt) {
        console.info("%s say:%s", this.s_name, txt)
    }
}
// Person test
var p = new Person();
p.f_say('hello'); // Person对象的正常调用

// Man 继承了Person中所有的属性和方法
function Man() {
    Person.call(this, this.arguments);// 这里理解下,Person()函数调用过程中,this执行Man,this.f_say=function(){}其实就是给Man执行的,可以认为给Man添加了几个属性和方法
    this.s_name = "Man"; // 注意,如果这句话放在第一行,将被Person的构造函数中的this.s_name = "Person"重新赋值
    this.f_playGame = function () {
        console.info("Man like play game");
    }
}
// Man test
var p_man = new Man();
p_man.f_say("hello"); // Man继承了Person中的f_say成员方法

 

 
2.apply,除了参数不同,和call完全一样,这里还是介绍下
apply的含义:
foo.apply(bar, tuple_arg)
表示调用foo函数的时候,内部涉及到this的都指向bar,这个例子要比前面的call的例子好

// apply
function foo(arg1, arg2) {
    this.s_name = "foo";
    this.f_func = function (arg1, arg2) {
        console.info(this.s_name + " " + arg1 + " " + arg2);// 这里的arg会按照作用域链和原型链综合查找
    }
}

function bar() {
    this.s_name = "bar";
}

var f = new foo("foo_arg1", "foo_arg2");
var b = new bar();
f.f_func.apply(b, ["apply_arg1", "apply_arg2"]); //调用foo类型的对象f中的f_func 方法,但是里面的this.s_name 其实是bar类型的对象b的
output:
bar apply_arg1 apply_arg2

继承的例子就不写, 和call一样,在Man()方法中调用Person.apply(this, []), 从而将Person() 中的this.* = * 执行了一遍,this其实是Man()
 
 
3. js原型(prototype)实现继承,具体的原理稍微有点复杂,可以查询其他资料
 

function Person() {
    this.s_name = "Person";
    this.f_say = function () {
        console.info(this.s_name)
    }
}

function Man() {
    this.s_name = "Man";
}

Man.prototype = new Person()

var p = new Man();
p.f_say();
 
output:
Man

 

4.构造函数
该方法和call 以及apply其实一个意思,只不过通过不同的途径来保证父函数执行时,里面的this是自己
 

function Person() {
    this.s_name = "Person";
    this.f_say = function () {
        console.info(this.s_name);
    }
}

function Man() {
    this.parent_method = Person;
    this.parent_method(this.arguments); // 执行时Person函数,里面的this其实是Man

    this.s_name = "Man"; // 如果放在第一行,会被Person() 的执行覆盖
}

var p = new Man(); 
p.f_say();
 
output:
Man

Java免费学习   Java自学网 http://www.javalearns.com

关注微信号:javalearns   随时随地学Java

或扫一扫

随时随地学Java

作者:不详 来源:网络
    你是从哪里知道本网站的?
  • 网友介绍的
  • 百度搜索的
  • Google搜索的
  • 其它搜索过来的
  • 网址输错了进来的
  • 太忙了不记得了
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
  • java学习网(www.javalearns.com) © 2014 版权所有 All Rights Reserved.
  • Email:javalearns@163.com 站长QQ:1356121699 晋ICP备14003680号-3
  • java学习网部分内容来自网络或网友发布,如侵犯了您利益,请发邮件至:javalearns@126.com,我们尽快处理!
  • Java学习网
  • 网站统计
  • 晋公网安备 14042902000001号