React 前端导航

原型与原型链、继承

原型:

每个function函数都有一个prototype属性指向一个对象,这个对象就是原型对象,每个构造函数创造出来的实例对象都会继承这个原型对象,并且包含__proto__属性指向原型对象。

原型链:

每个对象都会包含一个原型对象,原型对象也是对象,所以也会包含一个原型,因此形成的链式关联就是原型链。

instanceof原理
instanceof 主要的实现原理就是只要右边变量的prototype 在左边变量的原型链上即可

function instanceOf(left,right){
    let rightPrototype = right.prototype;
    let leftPrototype = left.__proto__;
    while(leftPrototype){
        if(leftPrototype === rightPrototype){
            return true;        
        }
        leftPrototype = leftPrototype.__proto__;
    }
    
    return false;
}

继承:

1.原型链继承

function A(){};
function B(){};
B.prototype = new A();//原型继承,原型上的属性所有实例共享,引用类型属性也共享
B.prototype.constructor = B;

2.借用构造函数(经典继承)

function A(){};
function B(){
    A.call(this);//借用构造函数继承,不继承A的原型
};

3.组合继承(原型链继承+借用构造函数继承)

function A(){};
function B(){
    A.call(this);//借用构造函数继承,不继承原型,第一次调用A的构造函数
};
B.prototype = new A();//原型继承,,第二次调用A的构造函数,A函数的非原型属性保留两份
B.prototype.constructor = B; //修正B原型的构造函数

4.原型式继承(Object.create的es5实现方式),将传入的对象作为创建的对象的原型。

function createObj(o){
    function A(){}
    A.prototype = o;
    return new A();
}

5.寄生继承

function createObj (o) {
    let clone = Object.create(o);
    clone.sayName = function () {
        console.log('hi');
    }
    return clone;
}

6.组合寄生继承

function A () {}
function B () {
    A.call(this);
}
B.prototype = createObj(A.prototype);
B.prototype.constructor = B;

声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。邮箱:farmerlzj@163.com。 本站原创内容未经允许不得转载,或转载时需注明出处: 内容转载自: React前端网:https://qianduan.shop//detail/9
想做或者在做副业的朋友欢迎加微信交流:farmerlzj,公众号:生财空间站。