JS原型与原型链-峰间的云

普通对象与函数对象

JS中，对象分为普通对象和函数对象两种，Object和Function是JS自带的函数对象。凡是通过new Function()的创建的对象都是函数对象，其他的都是普通对象。

下面这些是函数对象：

typeof Object // "function", 函数对象
typeof Function // "function", 函数对象

function f1 () {}
var f2 = function () {}
var f3 = new Function('str', 'console.log(str)')

typeof f1 // "function", 函数对象
typeof f2 // "function", 函数对象
typeof f3 // "function", 函数对象

typeof Object // "function", 函数对象

typeof Function // "function", 函数对象

function f1 () {}

var f2 = function () {}

var f3 = new Function('str', 'console.log(str)')

typeof f1 // "function", 函数对象

typeof f2 // "function", 函数对象

typeof f3 // "function", 函数对象

下面这些是普通对象：

var o1 = new f1()
var o2 = {}
var o3 = new Object()

typeof o1 // "object", 普通对象
typeof o2 // "object", 普通对象
typeof o3 // "object", 普通对象

var o1 = new f1()

var o2 = {}

var o3 = new Object()

typeof o1 // "object", 普通对象

typeof o2 // "object", 普通对象

typeof o3 // "object", 普通对象

原型对象

每当定义一个对象（函数）时，对象中都会包含一些预定义的属性。其中，函数对象会有一个prototype属性，其值就是我们所说的原型对象（普通对象没有prototype，但有__proto__属性；函数对象同时含有prototype和__proto__属性）。注意__proto__这里proto前后分别都是两个下划线，不是一个。

原型对象其实就是普通对象（Function.prototype除外，它是函数对象，但同时它又没有prototype属性）。

function f1 () {}
console.log(f1.prototype) // 一个仅含constructor和__proto__两个属性的对象
typeof f1.prototype // "object"

typeof Object.__proto__ // "function"

// 特例，没必要记住，平常根本用不到
typeof Function.prototype // "function"
typeof Function.prototype.prototype // "undefined"
typeof Object.prototype // "object"

function f1 () {}

console.log(f1.prototype) // 一个仅含constructor和__proto__两个属性的对象

typeof f1.prototype // "object"

typeof Object.__proto__ // "function"

// 特例，没必要记住，平常根本用不到

typeof Function.prototype // "function"

typeof Function.prototype.prototype // "undefined"

typeof Object.prototype // "object"

原型对象的主要作用是用于继承：

var Person = function (name) {
  this.name = name
}

Person.prototype.getName = function () {
  return this.name
}

var yakima = new Person('yakima')
yakima.getName() // "yakima"

var Person = function (name) {

this.name = name

}

Person.prototype.getName = function () {

return this.name

}

var yakima = new Person('yakima')

yakima.getName() // "yakima"

原型链

上面提到原型对象的主要作用是用于继承，其具体的实现就是通过原型链实现的。创建对象（不论是普通对象还是函数对象）时，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象（即创建它的函数对象的prototype属性）。

yakima.__proto__ === Person.prototype // true，对象的内置__proto__对象指向创建该对象的函数对象的prototype

Person.prototype.__proto__ === Object.prototype // true，Person.prototype这个原型对象是普通对象，是通过Object函数对象创建的

// 继续，Object.prototype对象也有__proto__属性，但它比较特殊，为null
Object.prototype.__proto__ === null // true

typeof null // "object"

yakima.__proto__ === Person.prototype // true，对象的内置__proto__对象指向创建该对象的函数对象的prototype

Person.prototype.__proto__ === Object.prototype // true，Person.prototype这个原型对象是普通对象，是通过Object函数对象创建的

// 继续，Object.prototype对象也有__proto__属性，但它比较特殊，为null

Object.prototype.__proto__ === null // true

typeof null // "object"

这个由__proto__串起来的直到Object.prototype.__proto__ ==> null对象的链称为原型链。

yakima的__proto__属性指向Person.prototype对象；
Person.prototype对象的__proto__属性指向Object.prototype对象；
Object.prototype对象的__proto__属性指向null对象。

下面有一些比较特别的情况，看完忘掉就可以了，如果是在准备面试，最好别看，别看混了^_^。

Object是函数对象，是通过new Function()创建的，所以Object.__proto__指向Function.prototype：

Object.__proto__ === Function.prototype // true

1	Object.__proto__ === Function.prototype // true

Function是函数对象，是通过new Function()创建的，所以Function.__proto__指向Function.prototype。本类创建本类。。。大概类似是这么个意思——人是人他妈生的，妖是妖他妈生的。

Function.__proto__ === Function.prototype // true

1	Function.__proto__ === Function.prototype // true

另外：

Function.prototype.__proto__ === Object.prototype // true

1	Function.prototype.__proto__ === Object.prototype // true

constructor

原型对象都有个constructor属性，用来引用它的函数对象。这是一种循环引用。

Person.prototype.constructor === Person // true
Function.prototype.constructor === Function // true
Object.prototype.constructor === Object // true

Person.prototype.constructor === Person // true

Function.prototype.constructor === Function // true

Object.prototype.constructor === Object // true

综合理解

原型和原型链是JS实现继承的一种模型。

var Animal = function () {}
var Dog = function () {}

Animal.price = 2000
Dog.prototype = Animal

var tidy = new Dog()

console.log(Dog.price) // undefined
console.log(tidy.price) // 2000

var Animal = function () {}

var Dog = function () {}

Animal.price = 2000

Dog.prototype = Animal

var tidy = new Dog()

console.log(Dog.price) // undefined

console.log(tidy.price) // 2000

对上例的分析：

Dog自身没有price属性，沿着Dog.__proto__属性往上找，因为Dog的赋值是通过var Dog = function () {}实现的，所以Dog其实是使用new Function()创建的，所以Dog.__proto__ ==> Function.prototype，Function.prototype.__proto__ ==> Object.prototype，而Object.prototype.__proto__ ==> null。很明显，整条链上都找不到price属性，只能返回undefined；
tidy自身没有price属性，沿着tidy.__proto__属性往上找，因为tidy对象是Dog函数对象的实例，所以tidy.__proto__ ==> Dog.prototype ==> Animal，从而tidy.price获取到了Animal.price的值。

JS原型与原型链

普通对象与函数对象

原型对象

原型链

constructor

综合理解

相关推荐

评论抢沙发

关于

分类目录

文章归档

最新评论

友情链接

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

QQ咨询

关注微信

回顶部

普通对象与函数对象

原型对象

原型链

constructor

综合理解

相关推荐

评论 抢沙发

关于

分类目录

文章归档

最新评论

友情链接

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

QQ咨询

关注微信

回顶部

评论抢沙发