js中__proto__(内部原型)和prototype(构造器原型)的关系

一、所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function)

Number.__proto__ === Function.prototype  // true
Boolean.__proto__ === Function.prototype // true
String.__proto__ === Function.prototype  // true
Object.__proto__ === Function.prototype  // true
Function.__proto__ === Function.prototype // true
Array.__proto__ === Function.prototype   // true
RegExp.__proto__ === Function.prototype  // true
Error.__proto__ === Function.prototype   // true
Date.__proto__ === Function.prototype    // true

JavaScript中有内置(build-in)构造器/对象共计12个(ES5中新加了JSON),这里列举了可访问的8个构造器。剩下如Global不能直接访问,Arguments仅在函数调用时由JS引擎创建,Math,JSON是以对象形式存在的,无需new。它们的__proto__是Object.prototype。如下

Math.__proto__ === Object.prototype  // true
JSON.__proto__ === Object.prototype  // true

上面说的“所有构造器/函数”当然包括自定义的。如下

// 函数声明
function Person() {}
// 函数表达式
var Man = function() {}
console.log(Person.__proto__ === Function.prototype) // true
console.log(Man.__proto__ === Function.prototype)    // true

这说明什么呢?

所有的构造器都来自于Function.prototype,甚至包括根构造器Object及Function自身。所有构造器都继承了Function.prototype的属性及方法。如length、call、apply、bind(ES5)。

Function.prototype也是唯一一个typeof XXX.prototype为 “function”的prototype。其它的构造器的prototype都是一个对象。如下

console.log(typeof Function.prototype) // function
console.log(typeof Object.prototype)   // object
console.log(typeof Number.prototype)   // object
console.log(typeof Boolean.prototype)  // object
console.log(typeof String.prototype)   // object
console.log(typeof Array.prototype)    // object
console.log(typeof RegExp.prototype)   // object
console.log(typeof Error.prototype)    // object
console.log(typeof Date.prototype)     // object
console.log(typeof Object.prototype)   // object

噢,上面还提到它是一个空的函数,alert(Function.prototype) 下看看。

知道了所有构造器(含内置及自定义)的__proto__都是Function.prototype,那Function.prototype的__proto__是谁呢?

相信都听说过JavaScript中函数也是一等公民,那从哪能体现呢?如下

console.log(Function.prototype.__proto__ === Object.prototype) // true

这说明所有的构造器也都是一个普通JS对象,可以给构造器添加/删除属性等。同时它也继承了Object.prototype上的所有方法:toString、valueOf、hasOwnProperty等。

最后Object.prototype的__proto__是谁?

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

已经到顶了,为null。

二、所有对象的__proto__都指向其构造器的prototype

上面测试了所有内置构造器及自定义构造器的__proto__,下面再看看所有这些构造器的实例对象的__proto__指向谁?

先看看JavaScript引擎内置构造器

var obj = {name: ‘jack‘}
var arr = [1,2,3]
var reg = /hello/g
var date = new Date
var err = new Error(‘exception‘)
 
console.log(obj.__proto__ === Object.prototype) // true
console.log(arr.__proto__ === Array.prototype)  // true
console.log(reg.__proto__ === RegExp.prototype) // true
console.log(date.__proto__ === Date.prototype)  // true
console.log(err.__proto__ === Error.prototype)  // true

再看看自定义的构造器,这里定义了一个Person

function Person(name) {
    this.name = name
}
var p = new Person(‘jack‘)
console.log(p.__proto__ === Person.prototype) // true

p是Person的实例对象,p的内部原型总是指向其构造器Person的prototype。

每个对象都有一个constructor属性,可以获取它的构造器,因此以下打印结果也是恒等的

1 function Person(name) {
2     this.name = name
3 }
4 var p = new Person(‘jack‘)
5 console.log(p.__proto__ === p.constructor.prototype) // true

上面的Person没有给其原型添加属性或方法,这里给其原型添加一个getName方法

1 function Person(name) {
2     this.name = name
3 }
4 // 修改原型
5 Person.prototype.getName = function() {}
6 var p = new Person(‘jack‘)
7 console.log(p.__proto__ === Person.prototype) // true
8 console.log(p.__proto__ === p.constructor.prototype) // true

可以看到p.__proto__与Person.prototype,p.constructor.prototype都是恒等的,即都指向同一个对象。

如果换一种方式设置原型,结果就有些不同了

function Person(name) {
    this.name = name
}
// 重写原型
Person.prototype = {
    getName: function() {}
}
var p = new Person(‘jack‘)
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // false

这里直接重写了Person.prototype(注意:上一个示例是修改原型)。输出结果可以看出p.__proto__仍然指向的是Person.prototype,而不是p.constructor.prototype。

这也很好理解,给Person.prototype赋值的是一个对象直接量{getName: function(){}},使用对象直接量方式定义的对象其构造器(constructor)指向的是根构造器Object,Object.prototype是一个空对象{},{}自然与{getName: function(){}}不等。如下

1 var p = {}
2 console.log(Object.prototype) // 为一个空的对象{}
3 console.log(p.constructor === Object) // 对象直接量方式定义的对象其constructor为Object
4 console.log(p.constructor.prototype === Object.prototype) // 为true,不解释 

上面代码中用到的__proto__目前在IE6/7/8/9中都不支持。IE9中可以使用Object.getPrototypeOf(ES5)获取对象的内部原型。

var p = {}
var __proto__ = Object.getPrototypeOf(p)
console.log(__proto__ === Object.prototype) // true

转载:http://www.cnblogs.com/snandy/archive/2012/09/01/2664134.html

时间: 2024-10-14 12:13:42

js中__proto__(内部原型)和prototype(构造器原型)的关系的相关文章

Js中关于内部方法、实例方法、原型方法、静态方法的个人见解。

function foo(name){    this.name=name;    // 实例方法    this.GetName=function(){        console.log("my name is "+name);        GetId();    }    // 内部方法    var GetId = function(){        console.log("I have no id..");    }} // 类方法foo.SayH

说一说js中__proto__和prototype以及原型继承的那些事

在面试中遇到过,问js如何实现继承,其实最好的方式就是构造函数+原型,今天在讨论中,发现自己以前理解上的一些误区,特地写出来,最近都比较忙,等手上的项目做完,可以来做个总结. 先说我以前没有认识到位的地方 1 __proto__这个不是标准实现的,但是各大浏览器和node都采用了,ECMA6计划标准化它,__proto__对应于标准中的[[prototype]],也就是所谓的内置原型属性,要把它和函数的prototype的相区别,其实,__proto__最终是指向Function.prototy

js中__proto__和prototype的区别和联系

作者:苏墨橘来源:知乎 备注:本篇文章比较清楚的解释了__proto__属性.prototype.instanceof,秉持一贯风格,好文收藏,贴在这里供大家学习. __proto__(隐式原型)与prototype(显式原型) 1.是什么 显式原型 explicit prototype property: 每一个函数在创建之后都会拥有一个名为prototype的属性,这个属性指向函数的原型对象.Note:通过Function.prototype.bind方法构造出来的函数是个例外,它没有pro

js中__proto__和prototype的区别和关系?

_proto__(隐式原型)与prototype(显式原型) 1.是什么 显式原型 explicit prototype property: 每一个函数在创建之后都会拥有一个名为prototype的属性,这个属性指向函数的原型对象.Note:通过Function.prototype.bind方法构造出来的函数是个例外,它没有prototype属性.(感谢 @陈禹鲁 同学的答案让我知道这一点) NOTE Function objects created using Function.prototy

[转载]js中__proto__和prototype的区别和关系

首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法. 2.方法(Function)方法这个特殊的对象,除了和其他对象一样有上述_proto_属性之外,还有自己特有的属性--原型属性(prototype),这个属性是一个指针,

理解js中__proto__和prototype的区别和关系

首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法. 2.方法(Function)方法这个特殊的对象,除了和其他对象一样有上述_proto_属性之外,还有自己特有的属性--原型属性(prototype),这个属性是一个指针,

js的__proto__、constructor和prototype属性

__proto__和constructor属性是对象所独有的:prototype属性是函数所独有的.但是由于JS中函数也是一种对象,所以函数也拥有__proto__和constructor属性. 先来看下面这段代码:function foo(){} let f = new foo(); foo()是函数,它的constructor属性指向Function(),它的prototype属性指向foo.prototype,它的__proto__属性指向Function.prototype.f是foo实

[js高手之路]原型对象(prototype)与原型链相关属性与方法详解

一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手之路]一步步图解javascript的原型(prototype)对象,原型链 已经分享过了. function CreateObj(uName) {             this.userName = uName;             this.showUserName = function

js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别

__proto__: 这个属性是实例对象的属性,每个实例对象都有一个__proto__属性,这个属性指向实例化该实例的构造函数的原型对象(prototype). proterty:这个方法是对象的属性.(据说和一个对象的attr类似,比如dom对象中) prototype:每个构造函数都有一个prototype对象,这个对象指向该构造函数的原型. 对象自身属性方法和原型中的属性方法的区别: 对象自身的属性和方法只对该对象有效,而原型链中的属性方法对所有实例有效. 例子: function bas