原型和原型链

作者: 阿水日记 | 来源:发表于2019-02-13 23:51 被阅读99次

1.构造函数

一开始this指向一个空对象 最后返回这个对象

构造函数和一般函数的区别:

1.使用方式

通过new执行后构造函数就是一个类了

2.在函数代码执行的时候

相同点:形成一个私有作用域(形参赋值->预解释->顺序执行)
不同点:不需要手动创建对象 最后不需要手动返回这个对象

image.png image.png

2、原型规则和示例

image.png
image.png

1)每一个函数数据类型(普通函数、类(构造函数))都有一个属性:prototype(显式原型)并且该属性是一个对象类型

2)并且在prototype上浏览器天生给他加了一个constructor(构造器)属性值是当前函数(类)本身

3)每一个对象数据类型(普通对象、实例、prototype,null除外)也天生自带一个属性:proto属性(隐式原型),属性值是当前实例所属类的原型(prototype )

image.png
image.png

4)当通过对象名.属性值获取对象的属性的时候,首先会在对象的私有属性上查找如果有就返回没有的话就去找proto即所属类的原型(上面都是这个类的公共属性和方法),如果没有再向上找一直找到Object为止如果还没有返回undefined

image.png

3 this和原型扩展

1)类中的this this.xxx=xxx this指向当前类的实例

2)方法中的this调用该方法的时候方法名点前面是谁 this就是谁

image.png

4原型链继承

        //原型链继承方式
        //1.原型继承【父所有为子公有】 最常见
        function A(){
            this.x=100
        }
        A.prototype.getX=function(){
            console.log(this.x)
        }
        function B1(){
            this.y=200
        }
        B1.prototype=new A
        B1.prototype.constructor=B1 //严谨的话加上这句
        let b1=new B1
        console.log(b1.x)

        //2.call继承【父私有为子私有】
        
        function B2(){
            A.call(this)
        }
        let b2=new B2
        console.log(b2.x)

        //3.冒充对象继承【父所有为子私有】
        
        function B3(){
            var temp =new A
            for(let k in temp){ //复制父的私有和自定义公有
                this[k] = temp[k]
            }
            temp = null //优化
        }
        let b3=new B3
        console.log(b3.x)

        //4.混合模式【父私有变子私有,父所有为子公有】
        function B4(){
            A.call(this)//父私有变子私有
        }
        B4.prototype=new A
        let b4=new B4
        console.log(b4.x)

        //5.寄生组合模式【父私有为子私有 父公有为子公有】
        function B5(){
            A.call(this)//父私有变子私有
        }
        B5.prototype=create(A.prototype)
        let b5=new B5
        console.log(b5.x)
        b5.getX()
        //ie 678不支持Object.create()
        function create(obj){
            function F(){}
            F.prototype=obj;
            return new F;
        }
image.png image.png

相关文章

网友评论

    本文标题:原型和原型链

    本文链接:https://www.haomeiwen.com/subject/ahjjeqtx.html