inheritance
Generally speaking, there is no current properties and methods, others have taken over to use, is inheritance.
How inheritance is implemented
- 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
- 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
- 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
- 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:
- 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.
- Prototype inheritance concept:
Inheritance by modifying the structure of the prototype chain is called prototype inheritance.
- 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
- constructor
A property within the stereotype object that points to the constructor associated with the stereotype object
- 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
- 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
- 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
__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