JavaScript inheritance and prototype chain

This time I will bring you JavaScript inheritance and prototype chain. What are the precautions when using JavaScript inheritance 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

Inherited method

When the inherited function is called, this points 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'

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

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 a constructor (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.

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 the create method:

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

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 include class, constructor, static, extends and super.

"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);

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

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

So when you execute:

var o = new Foo();

JavaScript actually executes (or something like this):

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

o.someProp;

It checks o Whether it has someProp attribute.

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

If still not, it will continue to look for Object.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); {}

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!

Recommended reading:

What class definition components are there in React

ajax study notes

The above is the detailed content of JavaScript inheritance and prototype chain. For more information, please follow other related articles on the PHP Chinese website!