本文通过一些问题的提出和解答来学习和梳理js原型链的知识
1.JS是否是面向对象的语言？
js 属于没有明确归类的语言，或者好听点叫“多范式语言”。js有面向对象的特性，也有函数式编程的特性。
2.如何理解“一切皆对象”？
js中除了基本类型，都是对象。
function a(){}
上面的a不是一个函数方法，而是一个函数对象。JavaScript中没有方法，只有属性。
3.JS是如何实现面向对象的？
面向对象三大特性：封装、继承、多态
在js中，所有的东西几乎都是Object，而他实现封装是方式通过Constructor。而实现继承和多态则是通过原型链的方式来实现。<b>JS是基于原型的面向对象</b>，原型也是对象。
4.JS如何实现一个类？
如何实现一个类，本质上是要看一个类new出来的实例，如何和该类进行关联。
看下面一个例子：
function Cat(name,color){
this.name=name;
this.color=color;
}
我们再来初始化一个他的实例
var cat1 = new Cat("大毛","黄色");
看一下cat1和Cat的关联
cat1
Cat {name: "大毛", color: "黄色"}
name: "大毛"
color: "黄色"
__proto__:
constructor: ƒ Cat(name,color)
__proto__: Object
我们可以看到cat1的constructor指向了Cat。说明js是通过constructor来实现类的。
5.JS中的继承是怎样实现的？
在面向对象的语言中，我们说A继承自B，那么A就能使用B的属性和方法，那么在js如何来实现继承的呢？我们知道在ES6之前js并没有class关键字，所以js的继承不是类继承。而且通过原型链来实现继承。
6.什么是原型？
在JavaScript中，原型就是一个对象，通过它可以实现对象之间属性的继承。任何一个对象也可以成为原型。之所以经常说对象的原型，实际上就是想找对象继承的上一级对象。对象与原型的称呼是相对的，也就是说，一个对象，它称呼继承的上一级对象为原型，它自己也可以称作原型链下一级对象的原型。
7.JS怎么来表现对象和其原型的关系？
“javascript原型是一个对象。 javascript中所有的构造函数都有一个属性，叫prototype，这个属性存放的就是原型对象；访问这个属性通过：函数名.prototype ，从而可以访问到这个原型对象，也可以为这个原型赋值。在原型对象中有一个属性叫constructor，这个constructor指向函数本身。我们可以访问到原型中的这个属性：函数名.prototype.constructor;我们可以为原型对象添加属性并赋值：函数名.prototype.属性名=值；为函数原型添加的属性，都会成为构造函数的属性，从而成为对象的属性。既然对象具有了原型内的属性，说明对象中的这些属性是从原型中继承来的。所以javascript是基于原型的继承的。”
8.如何通过原型链来实现一个继承？
我们来实现一个继承自animal的cat对象
首先我们有一个animal对象的构造函数
function Animal(){
this.species = "动物";
}
然后我们有个"猫"对象的构造函数
function Cat(name,color){
this.name = name;
this.color = color;
}
现在我们要让猫可以实现animal中的方法。
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黄色");
第一句的目的是让手动将Cat的prototype赋值为一个Animal的对象。第二句的理由是每个对象的实例的constructor会指向该对象prototype的constructor,在加了Cat.prototype = new Animal()后，Cat.prototype.constructor== Animal，那么cat1.constructor == Animal，显然这不是我们希望发生的事情，所以我们需要手动将Cat.prototype.constructor置回Cat。现在我们看下cat1的现状：
cat1
Cat {name: "大毛", color: "黄色"}
name: "大毛"
color: "黄色"
__proto__: Animal
species: "动物"
constructor: ƒ Cat(name,color)
__proto__: Object
9.是否有更好的实现方法？
我们注意到Animal对象没有入参，只有一个固定的属性species。这种情况下new一个实例出来其实是一种资源的浪费。js有一种较为习惯的写法，将不变属性写到Animal.prototype。
function Animal(){ }
Animal.prototype.species = "动物";
然后，将Cat的prototype对象，然后指向Animal的prototype对象，这样就完成了继承
Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黄色");
和8中的例子一样，我们改了Cat.prototype.constructor的值，但在该例子中，Cat.prototype = Animal.prototype，那么事实上我们也修改了Animal.prototype的值，这显然是不合理的。
我们继续来针对这个问题做出修改。
var F = function(){};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;
我们新增一个空对象来作为中介。F是空对象，所以几乎不占内存。这时，修改Cat的prototype对象，和8中的类似，修改的是一个实例的constructor，而不是函数对象的constructor，只影响了new出来的F，没有影响到F.prototype.我们可以讲上面的方法进行封装，使得继承实现的更为方便。
function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}
10.原型和原型链关系
prototype5.png
上图主要讲了js中涉及到原型和原型链的各个对象的示意图。
网友评论