基本概念
1.、js的对象可以分为函数对象和普通对象,每个对象都有proto属性,但是只有函数对象才有prototype属性(prototype=原型对象)
2、Object是*的函数对象,Function、Array、RegExp、Date、Boolean、Number、String等等是第二高级的函数对象,我们自己手写的function是再低一级的函数对象
3、proto是一个对象,它指向某一个prototype,并且有2个属性:constructor和proto
原型链的作用
1、共享属性(面向开发者)
先来看第一种写法
function Person(name) {
this.name = name
}
var p1 = new Person(‘x‘)
p1.sayName = function() {
console.log(this.name)
}
var p2 = new Person(‘y‘)
p2.sayName = function() {
console.log(this.name)
}
我们声明了一个构造函数Person,并为它的2个实例都定义了sayName方法
如果我们希望所有的实例都有sayName方法,减少重复的定义
可以像下面这么写:(第二种写法)
function Person(name) {
this.name = name
this.sayName() = function() {
console.log(this.name)
}
}
var p1 = new Person(‘x‘)
var p2 = new Person(‘y‘)
我们在构造函数Person中定义了一个数据成员和一个函数成员
每当我们创造一个新的Person实例时,都会在内存中单独为它分配私有的空间
也就是说,p1和p2都有自己的name属性和sayName方法
这个name属性和sayName方法是实例自己私有的
在控制台直接打印p1得到如下结果:(第一、第二种写法是等价的)
再来看第三种写法:
function Person(name) {
this.name = name
}
Person.prototype.sayName = function(){
console.log(this.name)
}
var p1 = new Person(‘x‘)
var p2 = new Person(‘y‘)
这样的话,每个Person实例依然都会有name属性和sayName方法
不同的地方在哪呢?
在控制台直接打印p1得到如下结果:
不难发现,当前这种写法是将sayName定义在Person的原型对象上的
也就是说,sayName方法不再是每个Person实例私有的,而是所有Person实例共享的
这样做 既不影响每个实例打印/输出自己的name值,又可以节省内存
2、面向编译器
function Person(name) {
this.name = name
}
Person.prototype.sayName = function(){
console.log(this.name)
}
var p1 = new Person(‘x‘)
p1.sayName()
还是相同的例子
当我们在程序中调用 p1.sayName方法时,编译器会沿着原型链(自底向上)地寻找原型对象上是否有这个方法
如上图所示,编译器会先从p1自身(最外层)开始找
然后去 p1.proto(即Person的原型对象 = 外层红色方框)里面找
最后再到 p1.proto.proto(即Object的原型对象 = 内层红色方框)里面找