inheritance

Generally speaking, there is no current properties and methods, others have taken over to use, is inheritance.

How inheritance is implemented

  1. The simplest inheritance
Var obj = {name: 'Hello ', age: 18, sayHello: function(){console.log('Hello! '); For (var k in obj){o[k] = obj[k]} console.log(o); SayHello: f(){}}Copy the code
  1. Prototype inheritance

Inheritance can be achieved by taking advantage of the fact that members of a prototype can be shared by other related objects. This method of inheritance is called prototype inheritance.

  • Adding members to a prototype object through the dynamic nature of the object (not strictly inheritance)
function Person(name, age){ this.name = name; this.age = age; } Person.prototype.sayHello = function() { console.log('Hello! '); } var p = new Person(' Person ', 18); p.sayHello(); // The p object inherits the stereotypeCopy the code
  • Replace the prototype object directly
function Person(name, age){ this.name = name; this.age = age; } Person.prototype.sayHi = function(){ console.log('Hi! '); } var x = { sayHello: function(){ console.log('Hello! '); } } Person.prototype = x; Var p = new Person(' Person ', 18); p.sayHello(); //p.sayHi(); // The sayHi method ceases to exist // The p object inherits the prototype (the x object) // Note: When the prototype is replaced, the members of the original prototype are lostCopy the code
  • Add members to prototype objects using mixins
function Person(name, age){ this.name = name; this.age = age; } Person.prototype.sayHi = function(){ console.log('Hi'); } var x = { sayHello: function(){ console.log('Hello! '); } } for(var k in x){ Person.prototype[k] = x[k]; } var p = newPerson(' person ', 18); p.sayHello(); // p inherits from the prototype objectCopy the code
  • The syntax of classical inheritance
Var obj = {name: 'zhang3'}; var o = Object.create(obj); console.log(o.name); Object.create(obj) returns an Object inherited from obj in the argumentCopy the code

The above method is proposed in ES5, so there are compatibility problems:

Check the browser’s ability to add an object. create method if it doesn’t have one, as in:

if(Object.create){ var o = Object.create(obj); }else{ Object.create = function(){ function F(){}; F.prototype = obj; var o = new F(); } var o = Object.create(obj); } // Do not use it, it is not convenient to judge each time, resulting in code redundancyCopy the code

Self-wrapping functions are used to detect browsers:

function isCreate(obj){ if(Object.create){ return Object.create(obj); }else{ function F(){}; F.prototype = obj; return new F(); }}Copy the code

Prototype chain

  1. What is a prototype chain?
  • Each constructor has a prototype object
  • Every object has a constructor
  • The prototype of each constructor is an object
  • Then the prototype object will also have a constructor
  • The constructor of this prototype object will also have a prototype object
  • This creates a chain structure called a prototype chain
  1. What is the basic form of prototype chain structure?
  function Person(name){
    this.name = name;
  }
  
  var p = new Person();
  
  //p ---> Person.prototype ---> Object.prototype ---> null
Copy the code

As shown in figure:

  1. Attribute search principle:
  • When accessing a member of an object, the system first looks for it.
  • If not found, go to the current object prototype object to find, if found directly use;
  • If not found, continue to find the prototype object of the prototype object, if found directly use;
  • If no Object is found, continue to search until object. prototype.
  1. Prototype inheritance concept:

Inheritance by modifying the structure of the prototype chain is called prototype inheritance.

  1. Complex prototype chains:

Now let’s write a more complex prototype chain.

// function PrimarySchool(){this.stage1 = 'PrimarySchool '; } MiddleSchool.prototype = new PrimarySchool() MiddleSchool.prototype.constructor = PrimarySchool; Function MiddleSchool(){this.stage2 = 'MiddleSchool '; } HighSchool.prototype = new MiddleSchool() HighSchool.prototype.constructor = MiddleSchool; Function HighSchool(){this.stage3 = 'HighSchool '; } College.prototype = new HighSchool() College.prototype.constructor = HighSchool; Function College(){this.stage4 = 'stage4 '; } var Human = new College(); console.log(Human);Copy the code

A member of the Object. The prototype

  1. constructor

A property within the stereotype object that points to the constructor associated with the stereotype object

  1. hasOwnProperty

Determines whether the object itself (without the stereotype) has a property

Function Person(){this.name = 'this.name '; } Person. Prototype. Name = 'Person '; var p = new Person(); console.log(p.name); / / li si console. The log (p.h asOwnProperty (' __proto__ '); // falseCopy the code
  1. The toString and toLocaleString
var o = {}; console.log(o.toString()); // [object Object] console.log(o.toLocaleString()); // [object Object] var now = new Date(); console.log(now.toString()); // Mon May 07 2018 14:12:35 GMT+0800 (China Standard Time) console.log(now.tolocalestring ()); // 2018/5/7 2:12:35 PMCopy the code
  1. valueOf

Gets the value of the current object

function Person(){ this.valueOf = function(){ return 123; } } var p = new Person(); console.log( 1 + p); // valueOf is called by default when an object is involved in an operation; If valueOf gets a value that cannot be evaluated, it calls p's toString method // and ends up doing string concatenationCopy the code
  1. __proto__

Attribute of a prototype object that can be accessed using the.__proto__ object

other

The arguments object

An object inside a function into which all arguments are stored when the function is called.

Chestnut 1: Pass in any argument and return the maximum number

function max(){ var maxNum = arguments[0]; for(var i = 1; i < arguments.length; i++){ maxNum = maxNum > arguments[i] ? maxNum : arguments[i]; } return maxNum; } console.log(max(1, 2, 3, 0, 6)); / / 6Copy the code

Chestnut 2: Array deduplication

  function distinct(){
    var arr = [];
    for(var i = 0; i< arguments.length; i++){
        if(arr.indexOf(arguments[i]) == -1){
            arr.push(arguments[i]);
        }
    }
    return arr;
  }
  console.log(distinct(1, 2, 2, 1, 3, 4)); // [1, 2, 3, 4]
Copy the code

Note:

  • When a function takes arguments, it can be called with no arguments
  • A function can be called with no parameters (arguments object).
  • A function with or without parameters is called with the argument values stored in the arguments object