JavaScript inheritance and prototype chain-JS Tutorial-php.cn

This time I will bring you JavaScript inheritance and prototype chain.What are theprecautionswhen using JavaScriptinheritance and prototype chain? The following is a practical case, let’s take a look. .

I have been watching WeChat mini-programs recently. In the afternoon, I changed my appetite and took a look at the prototype chain inheritance of js to supplement the basics of js

JavaScript ObjectThere is a chain pointing to a prototype object. When trying to access the properties of an object, he will not only search on the object, but also search for the prototype of the object, and the prototype of the prototype of the object, and search layer by layer. Until a property with a matching name is found or the end of the prototype chain is reached

// 让我们假设我们有一个对象 o, 其有自己的属性 a 和 b：// {a: 1, b: 2}// o 的 [[Prototype]] 有属性 b 和 c：// {b: 3, c: 4}// 最后, o.[[Prototype]].[[Prototype]] 是 null.// 这就是原型链的末尾，即 null，// 根据定义，null 没有[[Prototype]].// 综上，整个原型链如下: // {a:1, b:2} ---> {b:3, c:4} ---> nullconsole.log(o.a); // 1// a是o的自身属性吗？是的，该属性的值为1console.log(o.b); // 2// b是o的自身属性吗？是的，该属性的值为2// 原型上也有一个'b'属性,但是它不会被访问到.这种情况称为"属性遮蔽 (property shadowing)"console.log(o.c); // 4// c是o的自身属性吗？不是，那看看原型上有没有// c是o.[[Prototype]]的属性吗？是的，该属性的值为4console.log(o.d); // undefined// d是o的自身属性吗？不是,那看看原型上有没有// d是o.[[Prototype]]的属性吗？不是，那看看它的原型上有没有// o.[[Prototype]].[[Prototype]] 为 null，停止搜索// 没有d属性，返回undefined

Copy after login

Inherited method

When the inherited function is called,thispoints to the current inheritance object, rather than the prototype object where the inherited function resides.

var o = { a: 2, m: function(){ return this.a + 1; }};console.log(o.m()); // 3// 当调用 o.m 时,'this'指向了o.var p = Object.create(o);// p是一个继承自 o 的对象p.a = 4; // 创建 p 的自身属性 aconsole.log(p.m()); // 5// 调用 p.m 时, 'this'指向 p. // 又因为 p 继承 o 的 m 函数// 此时的'this.a' 即 p.a，即 p 的自身属性 'a'

Copy after login

Use different methods to create objects and generate prototype chains

Objects created by syntax structures

var o = {a: 1};// o 这个对象继承了Object.prototype上面的所有属性// o 自身没有名为 hasOwnProperty 的属性// hasOwnProperty 是 Object.prototype 的属性// 因此 o 继承了 Object.prototype 的 hasOwnProperty// Object.prototype 的原型为 null// 原型链如下:// o ---> Object.prototype ---> nullvar a = ["yo", "whadup", "?"];// 数组都继承于 Array.prototype // (Array.prototype 中包含 indexOf, forEach等方法)// 原型链如下:// a ---> Array.prototype ---> Object.prototype ---> nullfunction f(){ return 2;}// 函数都继承于Function.prototype// (Function.prototype 中包含 call, bind等方法)// 原型链如下:// f ---> Function.prototype ---> Object.prototype ---> null

Copy after login

Objects created by constructors

In JavaScript, a constructor is actually an ordinary function. When the new operator is used to act on this function, it can be called aconstructor(constructor).

function Graph() { this.vertices = []; this.edges = []; } Graph.prototype = { addVertex: function(v){ this.vertices.push(v); } }; var g = new Graph(); // g是生成的对象,他的自身属性有'vertices'和'edges'. // 在g被实例化时,g.[[Prototype]]指向了Graph.prototype.

Copy after login

`Object.create`Created objects

A new method was introduced in ECMAScript 5:Object.create(). This method can be called to create a new object. The prototype of the new object is the first parameter passed in when calling thecreatemethod:

var a = {a: 1}; // a ---> Object.prototype ---> nullvar b = Object.create(a);// b ---> a ---> Object.prototype ---> nullconsole.log(b.a); // 1 (继承而来)var c = Object.create(b);// c ---> b ---> a ---> Object.prototype ---> nullvar d = Object.create(null);// d ---> nullconsole.log(d.hasOwnProperty); // undefined, 因为d没有继承Object.prototype

Copy after login

`class`The object created by the keyword

Introduced by ECMAScript6 A new set of keywords are used to implement classes. These constructs will be familiar to developers using class-based languages, but they are different. JavaScript is still based on prototypes. These new keywords includeclass,constructor,static,extendsandsuper.

"use strict";class Polygon { constructor(height, width) { this.height = height; this.width = width; console.log(height) //2 }}class Square extends Polygon { constructor(sideLength) { super(sideLength, sideLength); } get area() { return this.height * this.width; } set sideLength(newLength) { this.height = newLength; this.width = newLength; }}var square = new Square(2);

Copy after login

Performance

function Graph() { this.vertices = []; this.edges = [];}Graph.prototype = { addVertex: function(v){ this.vertices.push(v); }};var g = new Graph();console.log(g.hasOwnProperty('vertices'));// trueconsole.log(g.hasOwnProperty('nope'));// falseconsole.log(g.hasOwnProperty('addVertex'));// falseconsole.log(g.proto.hasOwnProperty('addVertex'));// true

Copy after login

hasOwnPropertyis the only way in JavaScript to handle properties without traversing the prototype chain.

So when you execute:

var o = new Foo();

Copy after login

JavaScript actually executes (or something like this):

var o = new Object(); o._proto_ = Foo.prototype; Foo.call(0)

Copy after login

o.someProp;

Copy after login

It checksoWhether it hassomePropattribute.

If not, it will look forObject.getPrototypeOf(o).someProp,

If still not, it will continue to look forObject.getPrototypeOf(Object. getPrototypeOf(o)).someProp.

ps:

Object.getPrototypeOf()method returns the prototype of the specified object (the value of the internal[[Prototype]]attribute ).

var proto = {}; var obj = Object.create(proto); var a= Object.getPrototypeOf(obj) console.log(a); {}

Copy after login

If you think it is good, please visit MDN

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!