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

Posted 2020-08-22

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