__proto__VS。JavaScript原型

2020/09/20 17:01 · javascript ·  · 0评论

该图再次显示每个对象都有一个原型。构造函数Foo也具有其自己__proto__的Function.prototype,而Foo又通过其__proto__属性再次引用Object.prototype。因此,重复一遍,Foo.prototype只是Foo的显式属性,它引用b和c对象的原型。

var b = new Foo(20);
var c = new Foo(30);

__proto__之间有什么区别prototype

在此处输入图片说明

该图取自dmitrysoshnikov.com

__proto__是在查找链中用于解析方法的实际对象,等等。 prototype是使用以下命令__proto__创建对象时用于构建的对象new

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;

prototype是Function对象的属性。它是由该功能构造的对象的原型。

__proto__是对象的内部属性,指向其原型。Object.getPrototypeOf(O)尽管事实上的标准__proto__更快,但是当前的标准提供了等效的方法

您可以instanceof通过将函数prototype与对象的__proto__进行比较来找到关系,也可以通过更改来打破这些关系prototype

function Point(x, y) {
    this.x = x;
    this.y = y;
}

var myPoint = new Point();

// the following are all true
myPoint.__proto__ == Point.prototype
myPoint.__proto__.__proto__ == Object.prototype
myPoint instanceof Point;
myPoint instanceof Object;

Point是一个构造函数,它以程序方式构建对象(数据结构)。myPoint是由Point()这样构造的对象,因此在该时间Point.prototype被保存到myPoint.__proto__

声明函数时创建原型属性。

例如:

 function Person(dob){
    this.dob = dob
 }; 

Person.prototype声明上述函数后,将在内部创建属性。可以将许多属性添加到Person.prototype中,这些属性由使用new Person()创建的Person实例共享。

// adds a new method age to the Person.prototype Object.
Person.prototype.age = function(){return date-dob}; 

值得注意的Person.prototypeObject,默认情况下文字(可以根据需要更改)。

使用创建的每个实例new Person()都有一个__proto__指向属性Person.prototype这是用于遍历以查找特定对象的属性的链。

var person1 = new Person(somedate);
var person2 = new Person(somedate);

创建的2个实例Person中,这些2个对象可以调用age的方法Person.prototypeperson1.ageperson2.age

在上面的问题图片中,您可以看到FooFunction Object,因此它具有的__proto__链接,而Function.prototype链接又是的实例Object并具有的__proto__链接Object.prototype在原链接端这里__proto__Object.prototype指向null

任何对象都可以访问其原型链中与链接的所有属性__proto__,从而构成了原型继承的基础。

__proto__这不是访问原型链的标准方法,而是使用标准但类似的方法Object.getPrototypeOf(obj)

下面的instanceof运算符代码可以使您更好地理解:

当一个对象是一个Class的实例时,对象instanceofClass运算符返回true,更具体地说,如果Class.prototype在该对象的原型链中找到该对象,则该对象是该Class的实例。

function instanceOf(Func){
  var obj = this;
  while(obj !== null){
    if(Object.getPrototypeOf(obj) === Func.prototype)
      return true;
    obj = Object.getPrototypeOf(obj);
  }
  return false;
}      

上面的方法可以称为:instanceOf.call(object, Class)如果object是Class的实例,则返回true。

想到它的一种好方法是...

prototypeconstructor()函数使用。它实际上应该称为"prototypeToInstall",因为它就是这样。

并且__proto__是对象上的“已安装原型”(已通过所述constructor()功能在对象上创建/安装

为了说明,让我们创建一个函数

 function a (name) {
  this.name = name;
 }

JavaScript执行此代码时,会将prototype属性添加aprototype属性是一个具有两个属性的对象:

  1. constructor
  2. __proto__

所以当我们这样做

a.prototype 它返回

     constructor: a  // function definition
    __proto__: Object

现在您可以看到constructor,函数a本身并__proto__指向ObjectJavaScript 的根目录

让我们看看将a函数与new关键字一起使用会发生什么

var b = new a ('JavaScript');

当JavaScript执行此代码时,它将执行4件事:

  1. 它创建一个新对象,一个空对象// //
  2. 它创建__proto__b并使其指向a.prototype这样b.__proto__ === a.prototype
  3. 以新创建的对象(在步骤#1中创建)作为上下文(this)执行a.prototype.constructor(是function的定义a),因此name作为“ JavaScript”(添加到this传递属性将添加到新创建的对象。
  4. 它返回(在步骤1中创建的)新创建的对象,因此将var b分配给新创建的对象。

现在,如果我们添加a.prototype.car = "BMW"并执行操作
b.car,将出现输出“ BMW”。

这是因为当JavaScript执行此代码时,它car在上搜索了属性b,但没有找到所用的JavaScript b.__proto__(在步骤2中指向“ a.prototype”),而是找到了car属性,因此返回“ BMW”。

原型VS。__proto__VS。[[原型]]

创建函数时,会自动创建一个名为prototype的属性对象(您自己没有创建它)并附加到该函数对象(constructor)上。
注意:此新的原型对象还指向本机JavaScript对象,或具有本机JavaScript对象的内部-私有链接。

例:

function Foo () {
    this.name = 'John Doe';
}

// Foo has an object property called prototype.
// prototype was created automatically when we declared the function Foo.
Foo.hasOwnProperty('prototype'); // true

// Now, we can assign properties and methods to it:
Foo.prototype.myName = function () {
    return 'My name is ' + this.name;
}

如果您Foo使用new关键字创建一个新对象,则基本上是在创建(其中包括)一个新对象,该对象具有内部或私有链接Foo我们先前讨论的函数原型:

var b = new Foo();

b.[[Prototype]] === Foo.prototype  // true


对该函数对象
私有链接称为双括号prototype或just [[Prototype]]许多浏览器都向我们提供了一个名为公共链接__proto__

更具体地说,__proto__实际上是属于本机JavaScript对象getter函数它返回无论内部和私营部门的原型联动this绑定(返回[[Prototype]]b):

b.__proto__ === Foo.prototype // true

值得注意的是,从开始ECMAScript5,还可以使用getPrototypeOf方法获取内部私有链接:

Object.getPrototypeOf(b) === b.__proto__ // true


注意:此答案并不打算涵盖创建新对象或新构造函数的整个过程,而是有助于更好地理解什么是__proto__prototype以及[[Prototype]]它如何工作。

除了上面的出色答案之外,还需要使它更加清楚:

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

var eve = new Person("Eve");

eve.__proto__ == Person.prototype //true

eve.prototype  //undefined

实例具有__proto__具有prototype

在JavaScript中,函数可以用作构造函数。这意味着我们可以使用new关键字从中创建对象。每个构造函数都带有一个与之链接的内置对象。该内置对象称为原型。Instances of a constructor function use __proto__ to access the prototype property of its constructor function.

原型图

  1. 首先,我们创建了一个构造函数:function Foo(){}需要明确的是,Foo只是另一个功能。但是我们可以使用new关键字从中创建一个对象。这就是为什么我们称它为构造函数

  2. 每个函数都有一个唯一的属性,称为原型属性。因此,构造函数Foo具有一个原型属性,该属性指向其原型,即Foo.prototype(见图)。

  3. 构造函数本身就是一个函数,该函数是称为[[Function]]构造函数的系统构造函数的实例。因此,可以说它function Foo是由[[Function]]构造函数构造的。因此,__proto__我们Foo function将指向其构造函数的原型Function.prototype

  4. Function.prototype本身本身就是一个对象,它是由另一个名为的系统构造函数构造的[[Object]]因此,[[Object]]是的构造函数Function.prototype因此,可以说Function.prototype是的一个实例[[Object]]所以__proto__Function.prototypeObject.prototype

  5. Object.prototype是站在原型链中的最后一个人。我的意思是尚未建造。它已经在系统中了。所以它__proto__指向null

  6. 现在我们来看的实例Foo当我们使用创建实例时new Foo(),它会创建一个新对象,它是的实例Foo这意味着Foo这些实例的构造函数。在这里,我们创建了两个实例(x和y)。__proto__x和y的指向Foo.prototype

摘要:

__proto__一个对象的属性是映射到一个属性prototype的物体的构造函数。换一种说法:

instance.__proto__ === constructor.prototype // true

这用于形成prototype对象链。prototype链是一个对象的属性的查找机制。如果访问了对象的属性,JavaScript将首先查看对象本身。如果在该处找不到该属性,它将一直爬到protochain找到(或找不到)为止

例:

function Person (name, city) {
  this.name = name;
}

Person.prototype.age = 25;

const willem = new Person('Willem');

console.log(willem.__proto__ === Person.prototype); // the __proto__ property on the instance refers to the prototype of the constructor

console.log(willem.age); // 25 doesn't find it at willem object but is present at prototype
console.log(willem.__proto__.age); // now we are directly accessing the prototype of the Person function 

我们的第一个日志结果为true,这是因为如上所述,__proto__由构造函数创建的实例属性引用了构造函数的prototype属性。请记住,在JavaScript中,函数也是对象。对象可以具有属性,任何函数的默认属性都是一个名为prototype的属性。

然后,当将此函数用作构造函数时,从该函数实例化的对象将收到称为的属性__proto__并且此__proto__属性引用prototype构造函数属性(默认情况下每个函数都具有)。

为什么这有用?

JavaScript在查找属性时具有一种机制,该机制Objects称为“原型继承”,它的基本作用是:

  • 首先,检查属性是否位于对象本身上。如果是这样,则返回此属性。
  • 如果属性不位于对象本身上,它将“爬升原型链”。基本上,它查看属性所引用的对象__proto__在那里,它检查所引用的对象上的属性是否可用__proto__
  • 如果该属性不在__proto__对象上,它将沿着__proto__链条一直爬到Object对象。
  • 如果无法在对象及其prototype上的任何位置找到该属性,它将返回undefined

例如:

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

let mySelf = new Person('Willem');

console.log(mySelf.__proto__ === Person.prototype);

console.log(mySelf.__proto__.__proto__ === Object.prototype);

我碰巧正在从《 You't Know JS:this&Object Prototypes》中学习原型,这是一本很棒的书,可以理解其下的设计并阐明许多误解(这就是为什么我要避免使用继承和类似的东西instanceof)。

但我有一个与这里的人问的相同的问题。几个答案确实很有帮助并且很有启发性。我也很想分享我的理解。


什么是原型?

JavaScript中的对象具有内部属性,在规范中用表示[[Prototype]],这只是对另一个对象的引用。在创建对象时,几乎所有对象都null为此属性赋予非值。

如何获得对象的原型?

通过__proto__Object.getPrototypeOf

var a = { name: "wendi" };
a.__proto__ === Object.prototype // true
Object.getPrototypeOf(a) === Object.prototype // true

function Foo() {};
var b = new Foo();
b.__proto__ === Foo.prototype
b.__proto__.__proto__ === Object.prototype

什么是prototype

prototype是作为函数的特殊属性自动创建的对象,该对象用于建立委托(继承)链(也称为原型链)。

当我们创建一个函数时aprototype将自动创建为特殊属性,a并将函数代码另存为constructoron prototype

function Foo() {};
Foo.prototype // Object {constructor: function}
Foo.prototype.constructor === Foo // true

我想将此属性视为存储函数对象的属性(包括方法)的地方。这也是为什么在JS效用函数等规定的原因Array.prototype.forEach()Function.prototype.bind()Object.prototype.toString().

为什么要强调功能的性质

{}.prototype // undefined;
(function(){}).prototype // Object {constructor: function}

// The example above shows object does not have the prototype property.
// But we have Object.prototype, which implies an interesting fact that
typeof Object === "function"
var obj = new Object();

所以AraryFunctionObject是所有功能。我应该承认,这刷新了我对JS的印象。我知道函数是JS中的一等公民,但似乎它是基于函数构建的。

__proto__之间有什么区别prototype

__proto__引用适用于每个对象以引用其[[Prototype]]属性。

prototype是作为一个特殊的属性自动创建的对象函数,其被用于存储一个功能对象的属性(包括方法)。

有了这两个,我们就可以在思维上绘制原型链。如下图所示:

function Foo() {}
var b = new Foo();

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

 JavaScript原型与__prototype__

'use strict'
function A() {}
var a = new A();
class B extends A {}
var b = new B();
console.log('====='); // =====
console.log(B.__proto__ === A); // true
console.log(B.prototype.__proto__ === A.prototype); // true
console.log(b.__proto__ === B.prototype); // true
console.log(a.__proto__ === A.prototype); // true
console.log(A.__proto__ === Function.__proto__); // true
console.log(Object.__proto__ === Function.__proto__); // true
console.log(Object.prototype === Function.__proto__.__proto__); // true
console.log(Object.prototype.__proto__ === null); // true

在JavaScript中,每个对象(函数也是对象!)都有一个__proto__属性,该属性是对其原型的引用。

当我们使用new带有构造函数运算符创建新对象时,__proto__将使用构造函数的prototype属性设置新对象的属性,然后构造函数将被新对象调用,在此过程中,“ this”将是对新对象的引用在构造函数范围内,最后返回新对象。

构造函数的原型是__proto__属性,构造函数的prototype属性是与new操作员一起工作的

构造函数必须是一个函数,但是函数即使具有prototype属性也不一定总是构造函数

原型链实际上是__proto__引用其原型的对象的属性,也是引用该原型的原型的对象的属性__proto__,依此类推,直到引用对象的原型__proto__属性(即对null的引用)为止

例如:

console.log(a.constructor === A); // true
// "a" don't have constructor,
// so it reference to A.prototype by its ``__proto__`` property,
// and found constructor is reference to A

[[Prototype]]__proto__财产实际上是一回事。

我们可以使用Object的getPrototypeOf方法获取某些东西的原型。

console.log(Object.getPrototypeOf(a) === a.__proto__); // true

我们编写的任何函数都可以用于与new运算符一起创建对象,因此这些函数中的任何一个都可以是构造函数。

了解它的另一种好方法:

var foo = {}

/* 
foo.constructor is Object, so foo.constructor.prototype is actually 
Object.prototype; Object.prototype in return is what foo.__proto__ links to. 
*/
console.log(foo.constructor.prototype === foo.__proto__);
// this proves what the above comment proclaims: Both statements evaluate to true.
console.log(foo.__proto__ === Object.prototype);
console.log(foo.constructor.prototype === Object.prototype);

仅在__proto__支持IE11之后在该版本(例如IE9)之前,您可以使用constructor获取__proto__

原型

prototype是Function的属性。这是通过使用带有new关键字的(构造函数)函数来创建对象的蓝图。

__proto__在查找链中用于解析方法,属性。创建对象时(使用带有new关键字的构造函数),__proto__设置为(Constructor)Function.prototype

function Robot(name) {
    this.name = name;
}
var robot = new Robot();

// the following are true   
robot.__proto__ == Robot.prototype
robot.__proto__.__proto__ == Object.prototype

这是我(虚构的)解释,以消除混乱:

想象有一个与功能相关的假想类(蓝图/ coockie刀具)。该虚构类用于实例化对象。prototype是将事物添加到虚构类的扩展机制(C#或Swift扩展中的扩展方法)。

function Robot(name) {
    this.name = name;
}

以上可以想象为:

// imaginary class
class Robot extends Object{

    static prototype = Robot.class  
    // Robot.prototype is the way to add things to Robot class
    // since Robot extends Object, therefore Robot.prototype.__proto__ == Object.prototype

    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined;

        this.name = name;
    }

} 

所以,

var robot = new Robot();

robot.__proto__ == Robot.prototype
robot.prototype == undefined
robot.__proto__.__proto__ == Object.prototype

现在向prototypeRobot的方法添加方法

Robot.prototype.move(x, y) = function(x, y){ Robot.position.x = x; Robot.position.y = y};
// Robot.prototype.move(x, y) ===(imagining)===> Robot.class.move(x, y)

以上可以想象为Robot类的扩展:

// Swift way of extention
extension Robot{
    function move(x, y){    
        Robot.position.x = x; Robot.position.y = y
    }
}

反过来,

// imaginary class
class Robot{

    static prototype = Robot.class // Robot.prototype way to extend Robot class
    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined;

        this.name = name;
    }

    // added by prototype (as like C# extension method)
    function move(x, y){ 
        Robot.position.x = x; Robot.position.y = y
    };
}

简而言之:

> var a = 1
undefined
> a.__proto__
[Number: 0]
> Number.prototype
[Number: 0]
> Number.prototype === a.__proto__
true

这使您可以将属性附加到X.prototype。实例化类型为X的AFTER对象,它们仍然可以通过__proto__引用访问这些新属性,Javascript引擎使用该引用来遍历原型链。

原型或Object.prototype是对象文字的属性。它代表对象原型对象,您可以覆盖它以在原型链中进一步添加更多属性或方法。

__proto__是一个访问器属性(get和set函数),它通过访问它公开对象的内部原型。

参考文献:

  1. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype
  2. http://www.w3schools.com/js/js_object_prototypes.asp

  3. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

我为自己制作了一张代表以下代码段的小图:

var Cat = function() {}
var tom = new Cat()

了解__proto__和原型

我具有经典的OO背景,因此以这种方式表示层次结构很有帮助。为了帮助您阅读此图,请将图像中的矩形视为JavaScript对象。是的,功能也是对象。;)

JavaScript中的对象具有属性,__proto__并且只是其中之一。

该属性背后的思想是指向(继承)层次结构中的祖先对象。

JavaScript中的根对象是Object.prototype并且所有其他对象都是该对象的后代。__proto__根对象属性是null,它表示继承链的末端。

您会注意到这prototype是函数的属性。Cat是一个函数,而且还FunctionObject是(本机)的功能。tom不是函数,因此它没有此属性。

该属性背后的思想是指向将在构造中使用的对象,即,当您new在该函数上调用运算符时。

请注意,原型对象(黄色矩形)具有另一个称为的属性constructor,该属性
指向各个函数对象。为了简洁起见,未对此进行描述。

确实,当我们使用创建tom对象时new Cat(),创建的对象会将__proto__属性设置为prototype构造函数对象。

最后,让我们玩一下这个图。以下陈述是正确的:

  • tom.__proto__属性指向与相同的对象Cat.prototype

  • Cat.__proto__指向Function.prototype的对象,就像Function.__proto__Object.__proto__做的。

  • Cat.prototype.__proto__tom.__proto__.__proto__指向相同的对象Object.prototype

干杯!

我知道,我来晚了,但让我尝试简化一下。

我们说有一个功能

    function Foo(message){

         this.message = message ; 
     };

     console.log(Foo.prototype);

Foo函数将链接一个原型对象。因此,每当我们用JavaScript创建函数时,它总是会链接有原型对象。

现在让我们继续使用Foo函数创建两个对象。

    var a = new Foo("a");
    var b = new Foo("b");
    console.log(a.message);
    console.log(b.message);
  1. 现在我们有两个对象,对象a和对象b。两者都是使用构造函数Foo创建的。请记住,构造函数在这里只是一个字。
  2. 对象a和b都具有message属性的副本。
  3. 这两个对象a和b链接到构造函数Foo的原型对象。
  4. 在对象a和b上,我们可以在所有浏览器中使用proto属性访问Foo原型,在IE中,我们可以使用Object.getPrototypeOf(a)或Object.getPrototypeOf(b)

现在,Foo.prototype,一个。原型,以及b。 所有表示相同的对象。

    b.__proto__ === Object.getPrototypeOf(a);
    a.__proto__ ===  Foo.prototype;
    a.constructor.prototype  === a.__proto__;

以上所有都将返回true。

众所周知,可以在JavaScript中动态添加属性。我们可以向对象添加属性

    Foo.prototype.Greet = function(){

         console.log(this.message);
    }
    a.Greet();//a
    b.Greet();//b
    a.constructor.prototype.Greet();//undefined 

如您所见,我们在Foo.prototype中添加了Greet()方法,但是可以在a和b或使用Foo构造的任何其他对象中访问它。

在执行a.Greet()时,JavaScript将首先在属性列表中的对象a中搜索Greet。如果找不到,它将以a的原始上升自从 proto和Foo.prototype是同一对象,JavaScript将找到Greet()方法并执行它。

我希望现在 可以简化原型和原型

解释示例:

function Dog(){}
Dog.prototype.bark = "woof"

let myPuppie = new Dog()

现在,myPupppie具有__proto__指向Dog.prototype的属性。

> myPuppie.__proto__
>> {bark: "woof", constructor: ƒ}

但是myPuppie没有原型属性。

> myPuppie.prototype
>> undefined

因此,__proto__mypuppie的是对用于实例化此对象的构造函数的.prototype属性引用(当前的myPuppie对象与该对象具有“代理”关系__proto__),而myPuppie的.prototype属性完全不存在(因为我们没有设置)。

MPJ的很好解释:
原型与原型-用JavaScript创建对象

定义

(括号()中的数字是指向下面编写的代码的“链接”)

prototype-一个对象,包括:

=>此特定函数(5)的函数(3),
ConstructorFunction.prototype可通过此构造函数(1)创建或将要创建的每个对象(4)均可访问它们

=>构造函数本身(1 )


=>
__proto__此特定对象(原型对象)

__proto__(dandor proto?)-通过特定构造函数(1)创建的任何对象(2)之间的链接,以及该构造函数的原型对象的属性(5)允许每个创建的对象(2)访问原型函数和方法(4)(__proto__默认情况下,它包含在JS中的每个对象中)

代码澄清

1。

    function Person (name, age) {
        this.name = name;
        this.age = age;} 

2。

    var John = new Person(‘John’, 37);
    // John is an object

3。

    Person.prototype.getOlder = function() {
        this.age++;
    }
    // getOlder is a key that has a value of the function

4。

    John.getOlder();

5,

    Person.prototype;

我将尝试四年级的解释:

事情很简单。A prototype是应如何构建事物的示例。所以:

  • 我是一个人function,我建立与我相似的新对象prototype

  • 我是一个人object,我是以我自己__proto__为例建立的

证明

function Foo() { }

var bar = new Foo()

// `bar` is constructed from how Foo knows to construct objects
bar.__proto__ === Foo.prototype // => true

// bar is an instance - it does not know how to create objects
bar.prototype // => undefined

您创建的每个函数都有一个名为的属性prototype,它从一个空对象开始运行。除非将此功能用作构造函数,即使用“ new”关键字,否则该属性没有用。

这通常与__proto__对象属性混淆有些人可能会感到困惑,除了prototype对象属性可能使它们成为对象的原型。但是事实并非如此。prototype用于获取__proto__从函数构造函数创建的对象的。

在上面的示例中:

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

var eve = new Person("Eve");

console.log(eve.__proto__ == Person.prototype) // true
// this is exactly what prototype does, made Person.prototype equal to eve.__proto__

我希望这是有道理的。

使用__proto__静态方法呢?

function Foo(name){
  this.name = name
  Foo.__proto__.collection.push(this)
  Foo.__proto__.count++

}

Foo.__proto__.count=0
Foo.__proto__.collection=[]

var bar = new Foo('bar')
var baz = new Foo('baz')

Foo.count;//2
Foo.collection // [{...}, {...}]
bar.count // undefined
(function(){ 
      let a = function(){console.log(this.b)};
      a.prototype.b = 1;
      a.__proto__.b = 2;
      let q = new a();
      console.log(a.b);
      console.log(q.b) 
    })()

尝试这段代码以了解

只有一个对象用于原型链。这个对象显然有一个名称和一个值:__proto__是它的名称,prototype也是它的值。就这样。

为了使其更容易理解,请查看本文顶部的图表(Dmitgram by dmitry soshnikov),您将永远找不到__proto__指向其他事物的指向,而不仅仅是prototype价值。

要点是:__proto__是引用原型对象的名称,并且prototype是实际的原型对象。

就像在说:

let x = {name: 'john'};

x是对象名称(指针),并且{name: 'john'}是实际对象(数据值)。

注意:这只是在很大程度上简化了它们之间的关联的提示。

更新:这是一个简单的具体javascript示例,以更好地说明:

let x = new String("testing") // Or any other javascript object you want to create

Object.getPrototypeOf(x) === x.__proto__; // true

这意味着,当Object.getPrototypeOf(x)得到我们的实际价值x(这是它的原型),也正是__proto__x指向。因此__proto__确实是指向的原型x因此__proto__引用x(的指针x),prototypex(其原型)的值

我希望现在已经清楚了。

对于任何想了解原型继承的人来说,这都是一个非常重要的问题。据我了解,默认情况下,使用函数中的new创建对象时会分配原型,因为Function具有定义的原型对象:

function protofoo(){
}
var protofoo1 = new protofoo();
console.log(protofoo.prototype.toString()); //[object Object]

当我们创建一个没有新对象(即从函数显式)的普通对象时,它没有原型,但是有一个空原型可以分配原型。

var foo={
  check: 10
};
console.log(foo.__proto__); // empty
console.log(bar.prototype); //  TypeError
foo.__proto__ = protofoo1; // assigned
console.log(foo.__proto__); //protofoo

我们可以使用Object.create显式链接对象。

// we can create `bar` and link it to `foo`
var bar = Object.create( foo );
bar.fooprops= "We checking prototypes";
console.log(bar.__proto__); // "foo"
console.log(bar.fooprops); // "We checking prototypes"
console.log(bar.check); // 10 is delegated to `foo`

[[原型]]:

[[Prototype]]是JS中对象的内部隐藏属性,它是对另一个对象的引用。创建时的每个对象都会收到[[Prototype]]的非空值。请记住,当我们引用myObject.a之类的对象的属性时,将调用[[Get]]操作。如果对象本身具有属性,则将使用该属性。

let myObject= {
    a: 2
};

console.log(myObject.a);            // 2

但是,如果对象本身直接不具有请求的属性,则[[Get]]操作将继续跟随对象的[[Prototype]]链接。此过程将继续进行,直到找到匹配的属性名称或[[Prototype]]链结束(位于内置Object.prototype为止)。如果找不到匹配的属性,则将返回undefined。Object.create(specifiedObject)创建一个具有[[Prototype]]链接到指定对象的对象。

let anotherObject= {
    a: 2
};

// create an object linked to anotherObject
let myObject= Object.create(anotherObject);
console.log(myObject.a);                // 2

for..in循环和in运算符都使用[[Prototype]]链查找过程。因此,如果我们使用for..in循环来迭代对象的属性,那么通过该对象的[[Prototype]]链可以达到的所有可枚举的属性也将与对象本身的可枚举的属性一起枚举。并且当使用in运算符测试对象上是否存在属性时,in运算符将通过对象的[[Prototype]]链接检查所有属性,而不管其可枚举性如何。

// for..in loop uses [[Prototype]] chain lookup process
let anotherObject= {
    a: 2
};

let myObject= Object.create(anotherObject);

for(let k in myObject) {
    console.log("found: " + k);            // found: a
}

// in operator uses [[Prototype]] chain lookup process
console.log("a" in myObject);              // true

.prototype:

.prototype是JS中函数的属性,它是指具有构造函数属性的对象,该构造函数存储函数对象的所有属性(和方法)。

let foo= function(){}

console.log(foo.prototype);        
// returns {constructor: f} object which now contains all the default properties

foo.id= "Walter White";

foo.job= "teacher";

console.log(foo.prototype);       
// returns {constructor: f} object which now contains all the default properties and 2 more properties that we added to the fn object
/*
{constructor: f}
    constructor: f()
        id: "Walter White"
        job: "teacher"
        arguments: null
        caller: null
        length: 0
        name: "foo"
        prototype: {constructor: f}
        __proto__: f()
        [[FunctionLocation]]: VM789:1
        [[Scopes]]: Scopes[2]
    __proto__: Object

*/

但是JS中的普通对象没有.prototype属性。我们知道Object.prototype是JS中所有对象的根对象。所以很明显Object是一个函数,即typeof Object ===“ function”。这意味着我们还可以通过Object函数创建对象,例如让myObj = new Object()。同样,Array,Function也是函数,因此我们可以使用Array.prototype,Function.prototype来存储数组和函数的所有通用属性。因此,我们可以说JS建立在函数之上。

{}.prototype;                            // SyntaxError: Unexpected token '.'

(function(){}).prototype;                // {constructor: f}

如果我们从函数创建对象,也使用new运算符,则那些新创建的对象的内部隐藏的[[Prototype]]属性将指向原始函数的.prototype属性所引用的对象。在下面的代码中,我们从fn,Letter创建了一个对象,并向fn对象添加了2个属性,向fn的原型对象添加了两个属性。现在,如果我们尝试访问新创建的对象的两个属性,那么我们将只能访问添加到函数原型对象的属性。这是因为该函数的原型对象现在位于新创建的对象a的[[Prototype]]链上。

let Letter= function(){}

let a= new Letter();

Letter.from= "Albuquerque";

Letter.prototype.to= "New Hampshire";

console.log(a.from);                // undefined

console.log(a.to);                  // New Hampshire

.__proto__:

.__proto__是JS中对象的属性,它引用[[Prototype]]链中的另一个对象。我们知道[[Prototype]]是JS中对象的内部隐藏属性,它引用[[Prototype]]链中的另一个对象。我们可以通过两种方式获取或设置内部[[Prototype]]属性引用的对象

  1. Object.getPrototypeOf(obj) / Object.setPrototypeOf(obj)

  2. obj.__proto__

我们可以使用:遍历[[Prototype]]链 .__proto__.__proto__. .与.constructor,.toString()、. isPrototypeOf()一起,我们的dunder proto属性(__proto__)实际上存在于内置Object.prototype根对象上,但可在任何特定对象上使用。我们.__proto__实际上是一个吸气剂/设置者。.__proto__Object.prototype的实现如下:

Object.defineProperty(Object.prototype, "__proto__", {
    get: function() {
        return Object.getPrototypeOf(this);
    },
    set: function(o) {
        Object.setPrototypeOf(this, o);
        return o;
    }
});

检索值obj.__proto__类似于调用,obj.__proto__()它实际上返回Object.getPrototypeOf(obj)存在于Object.prototype对象上的getter fn的调用虽然.__proto__是可设置的属性,但是由于性能问题,我们不应该更改现有对象的[[Prototype]]。

如果我们从函数创建对象,则使用new运算符,然后那些新创建的对象的内部隐藏的[[Prototype]]属性将指向原始函数的.prototype属性所引用的对象。使用.__proto__属性,我们可以访问对象的内部隐藏的[[Prototype]]属性引用的其他对象。但是,__proto__它与[[Prototype]]不同,而是它的获取器/设置器。考虑下面的代码:

let Letter= function() {}

let a= new Letter();

let b= new Letter();

let z= new Letter();

// output in console
a.__proto__ === Letter.prototype;               // true

b.__proto__ === Letter.prototype;               // true

z.__proto__ === Letter.prototype;               // true

Letter.__proto__ === Function.prototype;        // true

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

Letter.prototype.__proto__ === Object.prototype;          // true

在此处输入图片说明

__proto__是要构造的基础prototype和构造函数,例如:function human(){}has 在构造函数的新实例中prototype通过共享__proto__更详细的阅读这里

由于正确地指出

__proto__是在查找链中用于解析方法等的实际对象。prototype是在使用__proto__new创建对象时用于构建
的对象:

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;

我们还可以注意到,__proto__使用函数构造函数创建的对象的属性指向该构造函数的原型属性所指向的内存位置

如果我们更改构造函数原型的内存位置__proto__则派生对象仍将继续指向原始地址空间。因此,要使公共属性在继承链中可用,请始终将属性附加到构造函数原型中,而不是重新初始化它(这会更改其内存地址)。

考虑以下示例:

function Human(){
    this.speed = 25;
}

var himansh = new Human();

Human.prototype.showSpeed = function(){
    return this.speed;
}

himansh.__proto__ === Human.prototype;  //true
himansh.showSpeed();    //25

//now re-initialzing the Human.prototype aka changing its memory location
Human.prototype = {lhs: 2, rhs:3}

//himansh.__proto__ will still continue to point towards the same original memory location. 

himansh.__proto__ === Human.prototype;  //false
himansh.showSpeed();    //25

我的理解是:__proto__和prototype都用于原型链技术。不同之处在于,以下划线命名的函数(例如__proto__)根本不针对显式调用的开发人员。换句话说,它们仅用于某些机制,例如继承等。它们是“后端”。但是命名为不带下划线的函数是为显式调用而设计的,它们是“前端”。

这是世界上最好的解释!

var q = {}
var prototype = {prop: 11}

q.prop // undefined
q.__proto__ = prototype
q.prop // 11

在函数构造函数javascript引擎中q.__proto__ = prototype,我们在编写时会自动调用此函数new Class,并在__proto__属性集中Class.prototype

function Class(){}
Class.prototype = {prop: 999} // set prototype as we need, before call new

var q = new Class() // q.__proto__ = Class.prototype
q.prop // 999

请享用 %)

本文地址:http://javascript.askforanswer.com/__proto__vsjavascriptyuanxing.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!