一、原型与原型链（重点）

1.1 原型（prototype）

1.函数的prototype属性

• 每个函数（包括浏览器内置函数和自定义函数）都有一个prototype属性，它默认指向一个Object空对象（即为原型对象）
• 原型对象中有一个属性constructor，它指向函数对象

内存结构图

        function f(){
    
    

        }
        console.log(f.prototype.constructor===f);  //true
        console.log(Date.prototype.constructor===Date); //true

2.给原型对象添加属性或者方法

• 作用：函数的所有实例对象自动拥有原型中的属性和方法

        function f(){
    
    
        }
        f.prototype.test = function(){
    
    
            console.log('我是函數f原型对象中的方法');
        }
        var f1 = new f();
        f1.test()  //控制台输出：我是函數f原型对象中的方法

1.2 prototype（显示原型）与__proto__（隐式原型）

• 每个函数(function）都有一个prototype (即显示原型属性）
• 每个实例对象都有一个__proto__ (即隐式原型属性）
• 实例对象的隐式原型 === 其对应构造函数的显示原型

        function f(){
    
      //构造函数
        }
        var f1 = new f();  //f1为f()实例对象
        
        console.log(f1.__proto__===f.prototype); //true	

内存结构图

1.3 原型链（别名：隐式原型链）

1.2图可以看到 obj空对象也是一个对象，本质上也是object对象的一个实例对象，那么它也有__proto__属性，这就形成了__proto__这条原型链。

原型链图解

当访问一个对象属性或方法时，
先在自身属性中查找，找到返回
如果没有，再沿着__proto__这条链向上查找，找到返回
如果最终都没有找到，则返回undefined

function f() {
    
    
            
        }
        f.prototype.a = 100;
        f.prototype.test = function(){
    
    
            console.log('test');
        }
        var f1 = new f(); //f1为f()实例对象
        f1.a=2
        console.log(f1.a);  //2         首先在自身属性找到 a = 2  
        f1.test();          //test      在自身没找到，沿着__proto__这条链找找到test方法
        console.log(f1.b)   //undefined 整条链都没找到

总图

扫描二维码关注公众号，回复： 14662450 查看本文章