原型对象
深层理解构造函数
在 ES6之前 ,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特征。
构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
new的执行过程:
- 在内存中创建一个新的空对象。
- 让 this 指向这个新的对象。
- 执行构造函数里面的代码,给这个新对象添加属性和方法。
- 返回这个新对象(所以构造函数里面不需要 return )
构造函数方法很好用,但是存在浪费内存的问题。如果所有对象都使用同一个函数,这样会节省内存,应该怎么做?
构造函数的原型对象
构造函数通过原型分配的函数是所有对象所共享的
JavaScript规定,每个构造函数都有一个原型对象存在,这个原型对象通过构造函数的prototype
属性来访问,属性指向了构造函数的原型对象
注意: prototype 就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有
把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法
//构造函数的原型对象
function Person() {} // 定义函数
console.log(Person.prototype) // 输出结果:{constructor: ƒ}
console.log(typeof Person.prototype) // 输出结果:object
案例:利用原型对象共享方法
//利用原型对象共享方法
function Person(name){
this.name=name
// this.sayHello=function(){
// console.log("你好,我叫"+this.name)
// }
}
//使用对象原型加入一个方法,和上述注释代码功能相同
Person.prototype.sayHello=function(){
console.log("你好,我叫"+this.name)
}
var p1=new Person('张三')
var p2=new Person('李四')
p1.sayHello()
p2.sayHello()
//方法相同,即可共享
console.log(p1.sayHello===p2.sayHello)//打印结果为:true
原型对象this指向:
- 构造函数中的this 指向实例对象.
- 原型对象里面放的是方法, 这个方法里面的this 指向的是这个方法的调用者, 也就是这个实例对象
理解:
- 原型是什么 ?
一个对象,我们也称为 prototype 为原型对象 - 原型的作用是什么 ?
共享方法
对象的原型对象
每个对象都有一个 __ proto__
属性,这个属性指向了构造函数的原型对象protptype
因此,之所以对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有__proto__ 原型的存在。指向构造函数的 prototype 原型对象
注意:
- __proto__对象原型和原型对象 prototype 是等价的
- __proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype
function Person() {}
var p1 = new Person()
console.log(p1.__proto__ === Person.prototype); // 输出结果:true
//对象是由构造函数创建出的,本质是一样的
实例对象和原型对象的关系:
访问对象的构造函数
每个原型对象中有一个constructor
属性**,该属性指向构造函数本身
constructor 主要用于记录该对象引用于哪个构造函数,还可以让原型对象重新指向原来的构造函数
//访问对象的构造函数
function Person(){}
//通过原型对象的constructor属性来访问对象的构造函数
console.log(Person.prototype.constructor===Person) //结果为:true
//函数名代表函数的入口地址,原型对象的constructor属性也代表着对象构造函数的地址
//通过实例对象的constructor属性来访问对象的构造函数
var p1=new Person()
console.log(p1.constructor===Person) //结果为:true
一般情况下,对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法,可以给原型对象采取对象形式赋值,但是会覆盖构造函数原型对象原来的内容,修改后的原对象 constructor 就不再指向当前构造函数
此时,可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数
案例:用赋值方式修改原型对象为新的对象,就无法访问构造器函数
//用赋值方式修改原型对象为新的对象,就无法访问构造器函数
function Person() { }
//修改原型对象为一个新的对象
Person.prototype = {
//constructor:Person //重新指回原来构造函数
sayHello: function () {
console.log("hello")
}
}
var p1 = new Person()
//使用实例对象p1访问新的原型对象中属性
p1.sayHello() //输出结果:hello
//使用constructor属性无法访问原来的构造函数
console.log(p1.constructor) //输出结果:ƒ Object() { [native code] }
//因此 ,需要 construtor:Person指回原来构造函数
构造函数、实例对象、原型对象的之间的关系:
原型对象的原型对象
function Person() {}
// 查看原型对象的原型对象
console.log(Person.prototype.__proto__)
// 查看原型对象的原型对象的构造函数
console.log(Person.prototype.__proto__.constructor)
案例:Person.prototype.__proto__这个对象其实就是Object.prototype对象
function Person() {}
console.log(Person.prototype.__proto__ === Object.prototype) // true
var obj = {}
console.log(obj.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__); // 输出结果:null
原型链
所有类都是直接或者间接从Object类继承产生。原型链反应的是一种继承关系
- 每个构造函数都有一个prototype属性指向原型对象。
- 原型对象通过constructor属性指向构造函数。
- 通过实例对象的 __proto__属性 可以访问原型对象。
- Object的原型对象的 __proto__属性 为null。
原型链结构图
函数在原型链中的结构
成员查找机制
- 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性
- 如果没有就查找它的原型(也就是 __proto__指向的 prototype 原型对象)
- 如果还没有就查找原型对象的原型(Object的原型对象)。
- 依此类推一直找到 Object为止(null)
- 如果最后都没查到,则会报undefined
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线
//成员查找机制
function Person() { this.name = '张三' }
Person.prototype.name = '李四'
var p = new Person()
console.log(p.name) // 输出结果:张三
delete p.name // 删除对象p的name属性
console.log(p.name) // 输出结果:李四
delete Person.prototype.name // 删除原型对象的name属性
console.log(p.name) // 输出结果:undefined
案例:利用原型对象扩展数组方法
//为数组添加sum()方法
Array.prototype.sum = function () {
var sum = 0
for (var i = 0; i < this.length; i++) {
sum += this[i]
}
return sum
}
var arr = [1, 2, 3]
console.log(arr.sum()) // 输出结果:6
console.log(Array.proptotype) //有了sum()方法
注意: 数组和字符串不能进行给原型对象覆盖操作,不可以采用Array.prototype={ }
方式