Javascript Prototype原型


Prototypes are the  mechanism by which  JavaScript objects inherit  features from one another.
原型就是js对象继承功能的机制。

原型chains work
prototype property  can be used to add methods to existing constructors.

JavaScript is often described as a prototype-based language — to provide inheritance, objects can have a prototype object, which acts as a template object that it inherits methods and properties from.

原型对象=》模板对象

An object's prototype object may also have a prototype object, which it inherits methods and properties from, and so on. This is often referred to as a prototype chain,
and explains why different objects have properties and methods defined on other objects available to them.

In JavaScript, a link is made between the object instance and its prototype (its __proto__ property, which is derived from the prototype property on the constructor), and the properties and methods are found by walking up the chain of prototypes.

link 通过对象instance和它的prototype()被made,  属性和方法通过prototype chain找到。

Note: It's important to understand that there is a distinction between an object's prototype (available via Object.getPrototypeOf(obj), or via the deprecated __proto__ property) and the prototype property on constructor functions.
注意理解 对象的原型构造函数的原型属性的区别,
a.__proto__
HTMLHeadingElement {Symbol(Symbol.toStringTag): "HTMLHeadingElement", constructor: ƒ}
Object.getPrototypeOf(a);
HTMLHeadingElement {Symbol(Symbol.toStringTag): "HTMLHeadingElement", constructor: ƒ}

The constructor function Foobar() has its own prototype, which can be found by calling Object.getPrototypeOf(Foobar). However this differs from its prototype property, Foobar.prototype, which is the blueprint for instances of this constructor function.

构造函数 他有一个prototype属性, 对象是没有 prototype(属性)的。 对象有__proto__。
构造函数的prototype(属性)实际上是构造函数能创建的实例的蓝图(模型,模具)

If we were to create a new instance — let fooInstance = new Foobar() — fooInstance would take its prototype from its constructor function's prototype property. Thus Object.getPrototypeOf(fooInstance) === Foobar.prototype.
如果我们去创建一个实例
let fooInstance = new Foobar()
fooInstance 将获得来自构造函数的prototype 。  
Object.getPrototypeOf(fooInstance) === Foobar.prototype
fooInstance.__proto__  === Foobar.prototype



function Person(first, last, age, gender, interests) {

  // property and method definitions
  this.name = {
    'first': first,
    'last' : last
  };
  this.age = age;
  this.gender = gender;
  //...see link in summary above for full definition
}



let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);

person1 -------->  Person  ---------> Object
inherits from prototype

name  来自 Person
toString\valueOf  来自 Object

What happens if you call a method on person1, which is actually defined on Object.prototype? For example:

person1.valueOf()
Copy to Clipboard
valueOf() returns the value of the object it is called on. In this case, what happens is:

  • The browser initially checks to see if the person1 object has a valueOf() method available on it, as defined on its constructor, Person(), and it doesn't.
  • So the browser checks to see if the person1's prototype object has a valueOf() method available on it. It doesn't, then the browser checks person1's prototype object's prototype object, and it has. So the method is called, and all is good!


原型链条,
只有在检索属性时才遍历原型链。如果直接在对象上设置或删除属性,则不会遍历原型链。


原型属性

阅读量: 564
发布于:
修改于: