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/blogs/detail/9

#js

相关推荐

浏览器中的js事件循环(Event loop)

本文将简述浏览器中的js事件循环机制,帮助我们理解浏览器环境js代码是如何运行的。Javascript的一大特点是单线程,也就意味着同一时间他只能做一件事。事件循环(Event Loop)是为了协调事件,用户交互,UI渲染,网络处理等行为,防止线程阻塞而诞生的。

2021年中国开发者755万全球第二,Javascript最受欢迎您,数据来源:GitHub

2021年11月17 日,GitHub发布2021年度报告:全球GitHub开发者用户超过7300万 ,其中 56.8% 来自北美之外的地区。美国开发者最多,共有1355万,中国开发者占 10%,有 755 万,位居全球第二。