从面试题什么是原型链说起

南瓜小神
1,420 阅读6分钟

前言

面试的时候经常会有面试官会问，什么是原型链，继承的方法。为了避免把相关的知识搞混，特意写了这篇文章作为参考。

首先大家在对JS原型进行解释的时候，会涉及两个概念：构造函数、原型对象

1.构造函数：通俗的一句话说，就是你在script标签里面声明的那个函数：
<body>
<script>
    function students() {
        /* 我就是构造函数 */
    }
</script>
</body>
2.原型对象：在声明了一个函数之后，浏览器会自动按照一定的规则创建一个对象，这个对象就叫做原型对象。这个原型对象其实是储存在了内存当中。
3.在声明了一个函数后，这个构造函数（声明了的函数）中会有一个属性prototype，这个属性指向的就是这个构造函数（声明了的函数）对应的原型对象；原型对象中有一个属性constructor，这个属性指向的是这个构造函数（声明了的函数）。下面一张图可以很简单理解：

image.png

使用构造函数创建对象

我们的构造函数使用new来创建对象的时候，就像下面这样：

<body>
<script>
    function students() {
        /* 我就是构造函数 */
    }
 
    var stu = new students();
 
</script>
 
</body>

此时，stu就是那个构造函数students创建出来的对象，这个stu对象中是没有prototype属性的，prototype属性只有在构造函数students中有，请看图！

img

可以看出，构造函数students中有prototype属性，指向的是students对应的原型对象；而stu是构造函数students创建出来的对象，他不存在prototype属性，所以在调用prototype的时候的结构是undefined，但stu有一个__proto__属性，stu调用这个属性可以直接访问到构造函数students的原型对象（也就是说，stu的__proto__属性指向的是构造函数的原型对象），请看图。

image.png 说明（引用前面提到的文章的内容，因为很重要）：

  • 从上面的代码中可以看到，创建stu对象虽然使用的是students构造函数，但是对象创建出来之后，这个stu对象其实已经与students构造函数没有任何关系了，stu对象的__proto__属性指向的是students构造函数的原型对象。

  • 如果使用new students()创建多个对象stu1、stu2、stu3，则多个对象都会同时指向students构造函数的原型对象。

  • 我们可以手动给这个原型对象添加属性和方法，那么stu1,stu2,stu3…这些对象就会共享这些在原型中添加的属性和方法。

  • 如果我们访问stu中的一个属性name，如果在stu对象中找到，则直接返回。如果stu对象中没有找到，则直接去stu对象的__proto__属性指向的原型对象中查找，如果查找到则返回。(如果原型中也没有找到，则继续向上找原型的原型—原型链)。

  • 如果通过stu对象添加了一个属性name，则stu对象来说就屏蔽了原型中的属性name。 换句话说：在stu中就没有办法访问到原型的属性name了。

  • 通过stu对象只能读取原型中的属性name的值，而不能修改原型中的属性name的值。 stu.name = “李四”; 并不是修改了原型中的值，而是在stu对象中给添加了一个属性name。

与原型有关的几个方法

  1. prototype属性

prototype 存在于构造函数中 (其实任意函数中都有，只是不是构造函数的时候prototype我们不关注而已) ，他指向了这个构造函数的原型对象。

2.constructor属性

constructor属性存在于原型对象中，他指向了构造函数

如下面代码：

<script type="text/javascript">
    function students () {
    }
    alert(students.prototype.constructor === students); // true
</script>

我们根据需要，可以students.prototype 属性指定新的对象，来作为students的原型对象。但是这个时候有个问题，新的对象的constructor属性则不再指向students构造函数了。

3.proto 属性(注意：左右各是2个下划线)

用构造方法创建一个新的对象之后，这个对象中默认会有一个属性__proto__, 这个属性就指向了构造方法的原型对象。

到此为止，JS的原型的基础就是这些了。

说完原型链了，接下来就不得不讲下继承了，感觉怎么都逃不开

原型模型创建对象的缺陷

原型中的所有的属性都是共享的。也就是说，用同一个构造函数创建的对象去访问原型中的属性的时候，大家都是访问的同一个对象，如果一个对象对原型的属性进行了修改，则会反映到所有的对象上面。

但是在实际使用中，每个对象的属性一般是不同的。张三的姓名是张三，李四的姓名是李四。

**但是，这个共享特性对 方法(属性值是函数的属性)又是非常合适的。**所有的对象共享方法是最佳状态

构造函数模型创建对象的缺陷

在构造函数中添加的属性和方法，每个对象都有自己独有的一份，大家不会共享。这个特性对属性比较合适，但是对方法又不太合适。因为对所有对象来说，他们的方法应该是一份就够了，没有必要每人一份，造成内存的浪费和性能的低下。

<script type="text/javascript">
	function Person() {
	    this.name = "李四";
	    this.age = 20;
	    this.eat = eat;
	}
  	function eat() {
	    alert("吃完东西");
    }
	var p1 = new Person();
	var p2 = new Person();
	//因为eat属性都是赋值的同一个函数，所以是true
	alert(p1.eat === p2.eat); //true
</script>

使用组合模式

原型模式适合封装方法，构造函数模式适合封装属性，综合两种模式的优点就有了组合模式

<script type="text/javascript">
	//在构造方法内部封装属性
	function Person(name, age) {
	    this.name = name;
	    this.age = age;
	}
	//在原型对象内封装方法
	Person.prototype.eat = function (food) {
		alert(this.name + "爱吃" + food);
	}
	Person.prototype.play = function (playName) {
		alert(this.name + "爱玩" + playName);
	}
	var p1 = new Person("李四", 20);
	var p2 = new Person("张三", 30);
	p1.eat("榴莲");
	p2.eat("香蕉");
	p1.play("迪丽热巴");
	p2.play("赵露思");
</script>

动态原型模式创建对象

前面讲到的组合模式，也并非完美无缺，有一点也是感觉不是很完美。把构造方法和原型分开写，总让人感觉不舒服，应该想办法把构造方法和原型封装在一起，所以就有了动态原型模式。

动态原型模式把所有的属性和方法都封装在构造方法中，而仅仅在需要的时候才去在构造方法中初始化原型，又保持了同时使用构造函数和原型的优点。

<script type="text/javascript">
	//构造方法内部封装属性
	function Person(name, age) {
		//每个对象都添加自己的属性
	    this.name = name;
	    this.age = age;
	    /*
	    	判断this.eat这个属性是不是function，如果不是function则证明是第一次创建对象，
	    	则把这个funcion添加到原型中。
	    	如果是function，则代表原型中已经有了这个方法，则不需要再添加。
	    	perfect！完美解决了性能和代码的封装问题。
	    */
	    if(typeof this.eat !== "function"){
	    	Person.prototype.eat = function () {
	    		alert(this.name + " 在吃");
	    	}
	    }
	}
	var p1 = new Person("迪丽热巴", 40);
	p1.eat();	
</script>

ES6的继承写法

ES6引入了Class语法糖，使得JS的继承更像面向对象语言的写法。

class Person{
    constructor(skin,language){
        this.skin=skin;
        this.language=language;
    }
    say(){
        console.log('I am a Person')
    }
}

子类American继承父类Person，子类没用定义constrcutor,则默认添加一个，并且在constrcutor中调用super函数,相当于调用父类的构造函数。调用super函数是为了在子类中获得父类的this，调用之后this指向子类。也就是父类.prototype.constructor.call(this)。

class Chinese extends Person{
    constructor(skin,language,positon){
        //console.log(this);//报错
        super(skin,language);
        //super();
        //console.log(this);调用super后得到了this，不报错
        this.positon=positon;
    }
    aboutMe(){
        console.log(this.skin+' '+this.language+' '+this.positon);
    }
}

感谢

谢谢你读完本篇文章，希望对你能有所帮助，如有问题欢迎各位指正。

我是南瓜小神(✿◡‿◡)，如果觉得写得可以的话，请点个赞吧❤。

avatar
文章
阅读
粉丝