JavaScript based learning - Prototype

Speaking from the object

JavaScript is an object-oriented language, and JavaScript implementations and common (such as Java) are not the same, not through JavaScript classes to abstract objects, created directly create objects, JavaScritpt only object.

[[Prototype]]

Almost all the objects have been given a non-null value when the object is created by a [[the Prototype]] would
value may be obtained by a .__ proto__, may be obtained by Object.getPrototypeOf (A)
var A = {}
Here Insert Picture Description
Here Insert Picture Description
object [[Prototype]] will eventually point to Objects.prototype
Here Insert Picture Description

Prototype role

Copy the JavaScript object-oriented way than through the class (like Java), but through the associated objects, the associated object is through the prototype
we create an object b and associate it to the object a, b find the prototype point a.
When we visited ba, although in a b does not exist, will always look up through the prototype (until you find Object), found in a prototype of a.

  var a = { a: 2 },
    b = Object.create(a);

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

Object b
Here Insert Picture Description

About functions
  • There will be also a function of the object prototype function has a prototype property, when we used to call this new function, the resulting object [[Prototype]] would correlation function of the prototype
  • JavaScript does not exist constructor only when using the new function calls, function calls will become a constructor call.
  • The first letter of the function name function normally we will call by new capital, but for JavaScript engines capitalize the first letter does not make any sense.

When we use new to call a function, the following procedure occurs

  1. Create a new object
  2. This object will be executed [[the Prototype]] connection
  3. This new object will be bound to this function call
  4. If the function does not return other objects, then the function call new expression will automatically return the new object (this)
  function Foo(name) {
    this.name = name;
  }

  Foo.prototype.myName = function() {
    return this.name;
  };

  var a = new Foo('a');

  console.log(a);
  console.log(a.myName()); // a
  console.log(a.constructor === Foo); // true
  console.log(Foo.constructor === Function);
  console.log(Foo.prototype.constructor === Foo); // true

Object A
A itself has a name attribute, A prototype of a myName from Foo () function, and constructors constructor, the constructor point A Foo, Foo.prototype.constructor also defaults to the Foo.

Here Insert Picture Description


The properties of a point .constructor Foo, not Foo described by a "configuration", trust relationships only between them
Foo.prototype .constructor the default attributes only function Foo properties when made, may be modified
when the modified Foo. after the prototype, a.constructor in "{}" is not found in the constructor property, continues to look to the upper prototype chain, found Object, so a.constructor === Object

  function Foo() {}
  Foo.prototype = {};
  var a = new Foo();
  console.log(a.constructor === Foo); // false
  console.log(a.constructor === Object); // true
inherit
  • Bar.prototype = Object.create (Fun.prototype). Create a new object is created Bar.prototype will pass Object.create () way inside and associate new object [[prototype]] to Foo.prototype. Doing so would Bar.prototype.constructor attribute is missing
  • When Bar.prototype = Fun.prototype time, make Bar.prototype and Fun.prototype common reference the same object, when Bar.prototype assignment, but also make Fun.prototype change, loss of inheritance meaning.
  • ES6 provides a better way Object.setPrototypeOf (Bar.prototype, Fun.prototype)
  function Fun(name) {
    this.name = name;
  }

  Fun.prototype.myName = function() {
    return this.name;
  };

  function Bar(name, lable) {
    Fun.call(this, name);
    this.lable = lable;
  }

  // Bar.prototype = Fun.prototype;
  // Bar.prototype = new Fun();
  Bar.prototype = Object.create(Fun.prototype);
  // Object.setPrototypeOf(Bar.prototype, Fun.prototype);
  Bar.prototype.myName = function() {
    return this.name + 'jsong';
  };

  var a = new Bar('jsong');
  console.log(a.myName()); // jsongjsong

  var b = new Fun('js');
  console.log(b.myName()); // js
Published 83 original articles · won praise 21 · views 50000 +

Guess you like

Origin blog.csdn.net/JsongNeu/article/details/96361640