「前端料包」深刻理解JavaScript原型和原型链

1. 前言

关于JS原型和原型链我以前刚学js就有写过一篇学习笔记形式的博客，但前两天翻出来一看——什么鬼，这是我写的吗？本身都看不懂了，因而我从新整理思路，今天 「前端料包」 带来第四篇。

原型和原型链是js中的难点也是重点，有句话说，没理解透原型和原型链，就算尚未真正入门的前端。而且原型和原型链会是面试中必不可少的话题。看完这篇相信你能对原型和原型链会有个深入的理解。若是以为本文对你有所帮助请点亮左边的👍，不甚感激🙆

2. 函数对象

JS全部对象分为函数对象和普通对象。凡是经过new Function()建立得来的对象都是函数对象。函数对象拥有prototype属性和__proto__属性。

prototype

JS设计之初为了实现简单继承，引入了prototype属性，也叫原型对象（显式原型）。

//原型对象
function Animal(){};  

console.log(typeof Animal.prototype) //Object 
console.log(typeof Object.prototype) // Object 
复制代码

能够看出，从本质上讲，prototype是一个普通对象，是函数对象的构造函数建立的一个实例。至关于在Animal建立的时候，自动建立了一个它的实例，而且把这个实例赋值给了prototype。

可是存在一个特例Function， Function.prototype是原型对象，本质倒是函数对象。做为一个函数对象，又没有prototype属性。

console.log(typeof Function.prototype) // 特殊 Function 
console.log(typeof Function.prototype.prototype) //undefined 函数对象却没有prototype属性
复制代码

__proto__属性

全部的对象obj(null和undefined除外)都具备__proto__属性（隐式原型），__proto__属性在本质上为一个指针，指向函数对象的prototype属性。

//建立构造函数
        function Animal(name,age){
            this.name = name;
            this.age= age;
        }
        Animal.prototype = {
            alertName(){
                alert(this.name);
            }
        }
        //建立实例
        var dog = new Animal("大黄");
        dog .print = function(){
             alert(this.name);
        }
        dog.print();  //大黄
        dog.alertName();  //大黄

复制代码

print()方法是dog实例自己具备的方法，因此dog.print()输出“大黄”；alertName()不属于dog实例的方法，属于构造函数的方法，dog.alertName()也会输出“大黄”，是由于dog实例继承了构造函数的方法。

事实上，实例dog的隐式原型（__proto__）指向它构造函数的显式原型（prototype），指向的意思是等价于，即

dog.__proto__ === Animal.prototype// true
复制代码

咱们能够经过一张图来帮助理解记忆

3. 构造器constructor

顾名思义，构造器constructor就是用来构造函数对象的，constructor 属性返回对建立此对象的函数对象的引用。通俗了讲就是指向当前对象的爸爸

function Animal(){};
console.log(Animal.constructor===Function); //true
console.log(Animal.prototype.constructor===Animal); //true
复制代码

函数Animal是由Function创造出来的,那么它的constructor指向的Function,Animal.prototype是由new Animal()的方式创造出来,那么Animal.prototype.constructor理应指向Animal。 一样，咱们用图来帮助记忆

留个思考题：Animal.prototype._proto_.constructor指向谁? ，欢迎在评论区留下你的答案

4. 原型链

原型链是JS中实现继承的主要方法。其基本思想就是让一个引用类型继承另外一个引用类型的属性和方法。下面就是咱们最多见的组合继承

function Animal(){  
    this.animalType = "animal";  
}  
Animal.prototype.getAnimalType = function(){  
    return this.animalType ;  
}  

function Dog(){  
    this.Dogtype = "dog";  
}  
Dog.prototype = new Animal();  

Dog.prototype.getDogType = function(){  
    return this.Dogtype ;  
}  

var dahuang = new Dog();

alert(dahuang.getAnimalType ());// animal
复制代码

dahuang.getAnimalType ()打印结果为animal，dahuang自身没有getAnimalType ()方法，那么就会去它的_proto_(即它的构造函数的prototype)中寻找，发现Dog中也没有，因而顺着_proto_再往上找，在Animal.prototype.getAnimalType找到，返回结果 。

若是Animal中仍是没有，就接着往上找，一直到Object.prototype原型对象终止

总结得出原型链就是：由原型对象组成，每一个对象都有 __proto__ 属性，指向了建立该对象的构造函数的原型，__proto__ 将对象链接起来组成了原型链。是一个用来实现继承和共享属性的有限的对象链。

• 属性查找机制: 当查找对象的属性时，若是实例对象自身不存在该属性，则沿着原型链往上一级查找，找到时则输出，不存在时，则继续沿着原型链往上一级查找，直至最顶级的原型对象Object.prototype，如仍是没找到，则输出undefined；
• 属性修改机制: 只会修改实例对象自己的属性，若是不存在，则进行添加该属性，若是须要修改原型的属性时，则能够用: b.prototype.x = 2；可是这样会形成全部继承于该对象的实例的属性发生改变。

5. 原型对象和原型链他们之间到底起什么做用？

若是构造函数中有不少属性和方法，那么构造函数全部的实例化对象都是公用这些属性和方法的，当有多个实例想用共用这些东西的时候，每一个实例都拷贝一份，就形成极大的资源浪费，那是否是能够考虑存把这些须要共用的属性和方法放到一个共同的东西上。这个共同的东西就是原型对象（prototype）。

固然原型链实现继承也会存在一些问题，最主要的问题来自包含引用类型的原型以及在继承父类函数的时候调用了父类构造函数，致使子类的原型上多了不须要的父类属性，存在内存上的浪费。其次就是在建立子类型的实例时，不能向超类型的构造函数中传递参数。解决办法将在后续的文章中揭晓~

后话

JavaScript的原型和原型链的确晦涩难懂，听说搞了几年前端的老司机都不必定绕的通，但经过实例和画图来帮助理解仍是能够的。最后，小生乃前端小白一枚，写文章的最初衷是为了让本身对该知识点有更深入的印象和理解，写的东西也很小白，文中若有不对，欢迎指正~ 而后就是但愿看完的朋友能够点个喜欢，也能够关注一波~ 我会持续输出！

我的博客连接

CSDN我的主页

掘金我的主页

简书我的主页