原型与原型链
一、构造函数
JS中创建对象的方式有三种:对象字面量、new、ES5的Object.create()。但本质上只有一种方式,也就是new。
当我们使用new来创建实例时,实际上经过了以下几步:
- 创建一个新对象
- 新对象的
__proto__
属性指向构造函数的原型对象 - this指向新对象
- 执行构造函数的代码
- 返回新对象
二、原型
原型分显式原型和隐式原型
显式原型
每个函数在创建之后都会拥有一个名为prototype的属性,这个属性指向函数的原型对象
note:通过Function.prototype.bind方法构造出来的函数是个例外,它没有prototype属性
隐式原型
js中任意对象都有一个内置属性[[prototype]],大多数浏览器支持通过__proto__
来访问。ES5中对于这个内置属性有了标准的get方法Object.getPrototypeOf().
note:Objectprototype这个对象是个例外,它的__proto__
值为null
原型对象实例对象的
__proto__
指向constructor(构造函数)的prototype,从而实现继承
prototype
对象相当于特定类型所有实例对象都可以访问的公共容器
function Person(nick, age){
this.nick = nick;
this.age = age;
}
Person.prototype.sayName = function(){
console.log(this.nick);
}
var p1 = new Person('Byron', 20);
var p2 = new Person('Casper', 25);
p1.sayName() // Byron
p2.sayName() // Casper
p1.__proto__ === Person.prototype //true
p2.__proto__ === Person.prototype //true
p1.__proto__ === p2.__proto__ //true
Person.prototype.constructor === Person //true
三、原型链
当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。
查找valueOf大致流程
当前实例对象obj,查找obj的属性或方法,找到后返回
没有找到,通过obj. __proto__
,找到obj构造函数的prototype并且查找上面的属性和方法,找到后返回
没有找到,把Array.prototype当做obj,重复以上步骤
当然不会一直找下去,原型链是有终点的,最后查找到Object.prototype时
Object.prototype.__proto__ === null
,意味着查找结束
我们来看看上图的关系
arr.__proto__ === Array.prototype
true
Array.prototype.__proto__ === Object.prototype
true
arr.__proto__.__proto__ === Object.prototype
true
// 原型链的终点
Object.prototype.__proto__ === null
true
原型链如下:
arr ---> Array.prototype ---> Object.prototype ---> null
这就是传说中的原型链,层层向上查找,最后还没有就返回undefined
四、JS中的继承
继承是指一个对象直接使用另外一个对象的属性和方法
属性如何继承?
我们先创建一个Person类
function Person (name, age) {
this.name = name
this.age = age
}
// 方法定义在构造函数的原型上
Person.prototype.getName = function () { console.log(this.name)}
此时我想创建一个Teacher类,我希望它可以继承Person所有的属性,并且额外添加属于自己特定的属性;
一个新的属性,subject——这个属性包含了教师教授的学科。
定义Teacher的构造函数
function Teacher (name, age, subject) {
Person.call(this, name, age)
this.subject = subject
}
属性的继承是通过在一个类内执行另外一个类的构造函数,通过call指定this为当前执行环境,这样就可以得到另外一个类的所有属性。
Person.call(this, name, age)