关于js的原型和原型链

余生长醉 提交于 2020-01-06 15:27:00

先要知道为什么要有原型和原型链,他解决了什么问题:

JS引入原型来更好的模仿类的功能,而原型链则用于实现继承。
其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

什么是原型:

JS以引用类型数据特性为基础,通过为构造函数自动创建prototype对象属性,实现类和继承,这个自动创建的prototype就是原型,也叫原型对象。

构造函数、原型和实例的关系

每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针(proto)

什么是原型链:
假如我们让原型对象等于另一个类型的实例(这是一种通过原型链实现继承的方法),结果会怎么样呢?
显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条,而链条的顶端就是Object,也就是说他们最初都继承自Object。这就是所谓原型链的基本概念。

原型链原理图:
在这里插入图片描述
代码部分:

            function Person(name = 'bob', ability = ['code', 'dance']) {
                this.name = name;
                this.ability = ability;

            }
            var bob = new Person();
            console.log(bob.__proto__===Person.prototype); 
            console.log(Person.prototype.constructor === Person); 
            console.log(Person.prototype.__proto__ === Object.prototype); 
            console.log(Object.prototype.__proto__ ); 

执行结果:
在这里插入图片描述

原型链实例:

            function Human(color = 'yellow', gender = 1) {
                this.skinColor = color;
                this.gender = gender;

            }
            Human.prototype.walk = function () {
                console.log('walking!');
            }
            function Person(name = 'bob', ability = ['code', 'dance']) {
                this.name = name;
                this.ability = ability;
                Human.call(this);
            }
            Person.prototype = new Human();
            var bob = new Person(); // 构造函数Person的实例
            bob.walk(); // 这里会打印出walking!

在这里插入图片描述

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!