js中__proto__和prototype的区别和联系

作者:苏墨橘
来源:知乎

备注:本篇文章比较清楚的解释了__proto__属性、prototype、instanceof,秉持一贯风格,好文收藏,贴在这里供大家学习。

__proto__(隐式原型)与prototype(显式原型)

1.是什么

  • 显式原型 explicit prototype property:

每一个函数在创建之后都会拥有一个名为prototype的属性,这个属性指向函数的原型对象。
Note:通过Function.prototype.bind方法构造出来的函数是个例外,它没有prototype属性。(感谢

@陈禹鲁

同学的答案让我知道这一点)

NOTE Function objects created using Function.prototype.bind do not have a prototype property or the [[Code]], [[FormalParameters]], and [[Scope]] internal properties. ----- ECMAScript Language Specification

  • 隐式原型 implicit prototype link:

JavaScript中任意对象都有一个内置属性[[prototype]],在ES5之前没有标准的方法访问这个内置属性,但是大多数浏览器都支持通过__proto__来访问。ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf().
Note: Object.prototype 这个对象是个例外,它的__proto__值为null

  • 二者的关系:

隐式原型指向创建这个对象的函数(constructor)的prototype

2. 作用是什么

  • 显式原型的作用:用来实现基于原型的继承与属性的共享。

ECMAScript does not use classes such as those in C++, Smalltalk, or Java. Instead objects may be created in various ways including via a literal notation or via constructors which create objects and then execute code that initialises all or part of them by assigning initial values to their properties. Each constructor is a function that has a property named “prototype” that is used to implement prototype-based inheritance and shared properties.Objects are created by using constructors in new expressions; for example, new Date(2009,11) creates a new Date object. ----ECMAScript Language Specification

  • 隐式原型的作用:构成原型链,同样用于实现基于原型的继承。举个例子,当我们访问obj这个对象中的x属性时,如果在obj中找不到,那么就会沿着__proto__依次查找。

Every object created by a constructor has an implicit reference (called the object’s prototype) to the value of its constructor’s “prototype” ----ECMAScript Language Specification

3. __proto__的指向
__proto__的指向到底如何判断呢?根据ECMA定义 ‘to the value of its constructor’s "prototype" ‘ ----指向创建这个对象的函数的显式原型。所以关键的点在于找到创建这个对象的构造函数,接下来就来看一下JS中对象被创建的方式,一眼看过去似乎有三种方式:(1)对象字面量的方式 (2)new 的方式 (3)ES5中的Object.create() 但是我认为本质上只有一种方式,也就是通过new来创建。为什么这么说呢,首先字面量的方式是一种为了开发人员更方便创建对象的一个语法糖,本质就是 var o = new Object(); o.xx = xx;o.yy=yy; 再来看看Object.create(),这是ES5中新增的方法,在这之前这被称为原型式继承,

道格拉斯在2006年写了一篇文章,题为 Prototypal Inheritance In JavaScript。在这篇文章中,他介绍了一种实现继承的方法,这种方法并没有使用严格意义上的构造函数。他的想法是借助原型可以基于已有的对象创建新对象,同时还不比因此创建自定义类型,为了达到这个目的,他给出了如下函数:

function object(o){
    function F(){}
    F.prototype = o;
    return new F()
}

----- 《JavaScript高级程序设计》P169

所以从实现代码 return new F() 中我们可以看到,这依然是通过new来创建的。不同之处在于由 Object.create() 创建出来的对象没有构造函数,看到这里你是不是要问,没有构造函数我怎么知道它的__proto__指向哪里呢,其实这里说它没有构造函数是指在 Object.create() 函数外部我们不能访问到它的构造函数,然而在函数内部实现中是有的,它短暂地存在了那么一会儿。假设我们现在就在函数内部,可以看到对象的构造函数是F, 现在

//以下是用于验证的伪代码
var f = new F();
//于是有
f.__proto__ === F.prototype //true
//又因为
F.prototype === o;//true
//所以
f.__proto__ === o;

因此由Object.create(o)创建出来的对象它的隐式原型指向o。好了,对象的创建方式分析完了,现在你应该能够判断一个对象的__proto__指向谁了。

好吧,还是举一些一眼看过去比较疑惑的例子来巩固一下。

  • 构造函数的显示原型的隐式原型:
  1. 内建对象(built-in object):比如Array(),Array.prototype.__proto__指向什么?Array.prototype也是一个对象,对象就是由 Object() 这个构造函数创建的,因此Array.prototype.__proto__ === Object.prototype //true,或者也可以这么理解,所有的内建对象都是由Object()创建而来。
  • 自定义对象

1. 默认情况下:

function Foo(){}
var foo = new Foo()
Foo.prototype.__proto__ === Object.prototype //true 理由同上

2. 其他情况:
(1)

 function Bar(){}
//这时我们想让Foo继承Bar
Foo.prototype = new Bar()
 Foo.prototype.__proto__ === Bar.prototype //true

(2)

//我们不想让Foo继承谁,但是我们要自己重新定义Foo.prototype
Foo.prototype = {
  a:10,
  b:-10
}
//这种方式就是用了对象字面量的方式来创建一个对象,根据前文所述
Foo.prototype.__proto__ === Object.prototype

: 以上两种情况都等于完全重写了Foo.prototype,所以Foo.prototype.constructor也跟着改变了,于是乎constructor这个属性和原来的构造函数Foo()也就切断了联系。

  • 构造函数的隐式原型

既然是构造函数那么它就是Function()的实例,因此也就指向Function.prototype,比如 Object.__proto__ === Function.prototype

4. instanceof
instanceof 操作符的内部实现机制和隐式原型、显式原型有直接的关系。instanceof的左值一般是一个对象,右值一般是一个构造函数,用来判断左值是否是右值的实例。它的内部实现原理是这样的:

//设 L instanceof R
//通过判断
 L.__proto__.__proto__ ..... === R.prototype ?
//最终返回true or false

也就是沿着L的__proto__一直寻找到原型链末端,直到等于R.prototype为止。知道了这个也就知道为什么以下这些奇怪的表达式为什么会得到相应的值了

 Function instanceof Object // true
 Object instanceof Function // true
 Function instanceof Function //true
 Object instanceof Object // true
 Number instanceof Number //false

文章参考:JavaScript instanceof 运算符深入剖析

时间: 2024-10-05 20:53:08

js中__proto__和prototype的区别和联系的相关文章

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),这个属性是一个指针,

javaScript中__proto__与prototype的区别与联系

[转]javaScript中__proto__与prototype的区别与联系 2014-5-4阅读490 评论0 最近在学习javascript的原型,发现了__proto__与prototype,学问很大,于是研究了一下. 首先解释一下什么是原型? 原型是一个对象,其他对象可以通过它实现属性继承. 对象又是什么呢? 在javascript中,一个对象就是任何无序键值对的集合,如果它不是一个主数据类型(undefined,null,boolean,number,array,string),那它

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

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

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

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

关于js中__proto__和prototype的一些理解<转>

var Person = function(name) {     this.name = name; } var p = new Person(); new操作符的操作是 var p = {} p.__proto__ =  Person.prototype Person.call(p) var p={}; 也就是说,初始化一个对象p. p.__proto__ = Person.prototype; Person.call(p);也就是说构造p,也可以称之为初始化p. 关键在于第二步,我们来证明

__proto__与prototype的区别与联系

最近在学习javascript的原型,发现了__proto__与prototype,学问很大,于是研究了一下. 首先解释一下什么是原型? 原型是一个对象,其他对象可以通过它实现属性继承. 对象又是什么呢? 在javascript中,一个对象就是任何无序键值对的集合,如果它不是一个主数据类型(undefined,null,boolean,number,array,string),那它就是一个对象. 那么如何查看一个对象的原型是啥呢?又如何给一个对象设置原型呢? 标准对象原型访问器Object.ge

浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

var num = 1;    var str = '1';    var test = 1;    test == num  //true 相同类型 相同值    test === num //true 相同类型 相同值    test !== num //false test与num类型相同,其值也相同, 非运算肯定是false    num == str  //true 把str转换为数字,检查其是否相等.    num != str  //false == 的 非运算    num ==