引入
接触了大量类型的语言,我们对于继承的概念一定不陌生,不论是Java或者C++都是属于类继承的语言,而JavaScript的继承类型是基于原型的继承机制。
什么是基于原型的继承机制呢?大家都熟知类和对象的关系,也就是蓝图或者模板与实例的关系,ES6中JavaScript也引入了class的,但是相较于传统语言,JavaScript中的class的作用更倾向于语法糖,它的作用在于可以让对象原型的写法更清晰。
原型并不是class而是对象实例,也就是每一个实例化的对象,它都是一个原型模板。
什么是原型链?
原型链并不难理解,刚刚我们提到,每一个对象实例都是一个原型模板,并且,每一个原型也是一个对象,那么也就是说,每一个实例化的对象它既是对象也是原型,而原型之上又存在原型,那么这样一个实例对象连接着原型对象的链式结构,就形成了原型链。
prototype属性
每一个函数都具有prototype属性,简单来说,prototype属性指向一个函数的原型对象,而这个原型对象里包含继承的所有的属性的方法,而所有的对象实例都共享这个方法。
举个简单的例子我们创建一个函数Person,通过prototype属性添加了属性或方法,你以此为模板实例化出来的所有的实例化对象都完全具有这些属性或方法,并且可以修改使用,这说明,通过prototype属性我们可以为一个函数或者原型去添加属性方法
// 创建一个Person函数
function Person(){}
//通过prototype属性添加属性或方法
Person.prototype.name = 'zhangsan';
Person.prototype.age = 18;
Person.prototype.say = function(){
console.log('zhangsan say Hi');
}
// 实例化一个person1 并调用他的属性和方法
var person1 = new Person();
console.log(person1.age); //18
person1.say(); //zhangsan say Hi
// 实例化第二个对象person2来和第一个person1对比
var person2 = new Person();
console.log(person1.say == person2.say); //true
console.log(person1.age == person2.age); //true
接下来我们实例化一个person2并修改其中的某个属性例如age,并观察person1中的age。我们发现只有person2的age发生了改变,由此我们发现单纯修改属性是不会变更原型对象中的属性的。
// 这个时候我们修改preson2中的age发现只有2发生了改变
person2.age = 63;
console.log(person2.age); //63
console.log(person1.age); //18
那么我们如何去改变原型对象中的属性值呢?这个时候我们不得不提到我们的__proto__,在谷歌等浏览器中定义了一个__proto__来帮助我们完成此事,通过它你可以访问到继承的原型对象,并且去改变操作它,并且我们很快发现,所有的不论何时实例化的对象都发生的改变,因为原型对象发生了改变
// 打印一下这个__proto__
console.log(person2.__proto__);//{name: 'zhangsan', age: 18, say: ƒ, constructor: ƒ}
// 这个时候我们修改preson2中的__proto__中的age
person2.__proto__.age = 1800;
// 新建第三个后我们发现不论是1还是3都受到了改变
var person3 = new Person();
console.log(person3.age); //1800
console.log(person1.age); //1800
最后简单提一下,我们一般不直接操作原型对象,而是操作实例对象。