javascript 中的继承实现, call,apply,prototype,构造函数

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