1, Constructors and prototypes
1. Why can the new operator create an instance object?
(1) Create a new empty object in memory.
(2) Inherit the prototype of the constructor.
(3) this points to the new object and calls the constructor.
(4) Returns a new object.
2. Prototype and prototype chain
(1) Prototype
- Each function has a prototype attribute that points to another place called the prototype object.
- Each object has one__ proto__ Property, called the prototype, points to the prototype object of its constructor.
- __ proto__ And prototype have a constructor attribute, which refers back to the constructor itself.
(2) Prototype chain:__ proto__ Path of
- When accessing the properties of an object, it will first look up on the object itself.
- If not, find its prototype, that is__ proto__ The prototype object that points to.
- Find the prototype of the prototype object or not.
- And so on until object Prototype__ proto__， Point to null.
3. How many ways can JavaScript inherit?
- Prototype chain inheritance, construction inheritance, instance inheritance, copy inheritance, composite inheritance, parasitic composite inheritance
Front work
// Define an animal class
function Animal (name) {
// attribute
this.name = name || 'Animal';
// Example method
this.sleep = function(){
console.log(this.name + 'be sleeping!');
}
}
// Prototype method
Animal.prototype.eat = function(food) {
console.log(this.name + 'I am eating:' + food);
};
(1) Prototype chain inheritance
Core: take the instance of the parent class as the prototype of the child class
function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
var cat = new Cat();
console.log(cat.name); // cat
cat.eat('fish') // cat is eating: fish
cat.sleep() // cat is sleeping!
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true
Copy code
advantage:
- 1. Pure inheritance. An instance is an instance of a child class and an instance of a parent class
- 2. The parent class adds prototype methods / properties, which can be accessed by all subclasses
- 3. Simple and easy to implement
Disadvantages:
- 1. To add properties and methods to subclasses, you must execute them after statements such as new Animal(), not in the constructor
- 2. All properties from the prototype object are shared by all instances
- 3. When creating a child instance, you cannot pass parameters to the parent constructor
- 4. Multiple inheritance is not supported
(2) Structural inheritance
Core: using the constructor of the parent class to strengthen the instance of the child class is equivalent to copying the instance attribute of the parent class to the child class (without using the prototype)
function Cat(name) {
Animal.call(this);
this.name = name || 'Tom';
}
var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom is sleeping!
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
Copy code
advantage:
- 1. It solves the problem that subclass instances share parent class reference properties in prototype chain inheritance
- 2. When you create a subclass instance, you can pass parameters to the parent class
- 3. Multiple inheritance can be implemented (call multiple parent objects)
Disadvantages:
- 1. An instance is not an instance of a parent class, but an instance of a knowledge subclass
- 2. It is an instance property and method that can inherit the parent class, but cannot inherit the prototype property / method
- 3. Function reuse cannot be realized. Each subclass has a copy of the parent class instance function, which affects the performance
(3) Instance inheritance
Core: add new features for parent class instances and return them as child class instances
function Cat(name){
var instance = new Animal();
instance.name = name || 'Tom';
return instance;
}
var cat = new Cat();
console.log(cat.name) // Tom
cat.sleep() // Tom is sleeping!
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false
Copy code
advantage:
- 1. There is no restriction on the calling method. Whether it is a new subclass () or a subclass (), the returned object has the same effect
Disadvantages:
- 1. An instance is an instance of a parent class, not a child class
- 2. Multiple inheritance is not supported
(4) Copy inheritance
Core: copy by copy
function Cat(name){
var animal = new Animal();
for(var p in animal){
Cat.prototype[p] = animal[p];
}
this.name = name || 'Tom';
}
var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom is sleeping!
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
Copy code
advantage:
- 1. Support multiple inheritance
Disadvantages:
- 1. Low efficiency and high memory consumption (because the attributes of the parent class need to be copied)
- 2. Unable to get parent class enumerable methods (enumerable methods cannot be accessed using for in)
(5) Combinatorial inheritance
Core: through the parent class construction, inherit the properties of the parent class and retain the advantages of passing parameters, and then realize function reuse by taking the parent class instance as the child class prototype
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom is sleeping!
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
Copy code
advantage:
- 1. It makes up for the defect of structural inheritance. It can inherit instance properties / methods or prototype properties / methods
- 2. It is both an instance of a subclass and an instance of a parent class
- 3. There is no reference property sharing problem
- 4. Transmissible parameter
- 5. Function reusability
Disadvantages:
- 1. The parent class constructor is called twice and two instances are generated (the subclass instance masks the one on the subclass prototype)
(6) Parasitic combinatorial inheritance
Core: cut off the instance attribute of the parent class through parasitism, so that the instance method / attribute will not be initialized twice when calling the construction of the parent class twice, so as to avoid the disadvantage of inheritance combination
function Cat(name) {
Animal.call(this);
this.name = name || 'Tom';
}
// Create a class without an instance method
var Super = function () { };
Super.prototype = Animal.prototype;
//Prototype instances as subclasses
Cat.prototype = new Super();
// Test Code
var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom is sleeping!
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
Copy code
advantage:
- 1. Perfect
Disadvantages:
- 1. Complex implementation
2, Function advanced order
1. The direction of this?
- this always points to the direct caller of the function.
- The arrow function does not have its own this. Its this points to the this of the upper scope.
| Call mode | this point |
|---|---|
| Ordinary function call | window |
| constructor call | Instance object |
| Object method call | The object to which the method belongs |
| Event binding method | Bind event object |
| Timer Functions | window |
| Execute function now | window |
2. What is the difference between call, bind and apply?
Similarities:
- Can change the this point of the function.
difference:
- Call and apply call functions, but call passes a parameter list, while apply passes an array of parameters.
- bind does not call the function.
3. Strict mode
- "use strict"
- Variables in this mode must be declared before they can be used.
- Declared variables cannot be deleted in this mode.
- In this mode, this of the function in the global scope is undefined.
- In this mode, the function cannot have parameters with duplicate names.
4. What is a closure?
- A closure is a function that can read internal variables of other functions.
- Advantages: make external access to local things.
- Disadvantages: improper use is easy to cause memory leakage.
3, Frequently asked questions
1,Object.defineProperty()
- Object. The defineproperty () method will define a new property on an object, or modify the original property and return the object.
Object.defineProperty(obj, prop, descriptor)
(1) Parameters:
- obj: target object
- prop: the name of the attribute to be defined or modified
- descriptor: configuration object of target attribute
(2) descriptor Description:
- Value: sets the value of the attribute
- get: triggered when calling obj[prop]
- set: triggered when setting obj[prop]
- writable: Specifies whether the attribute value can be rewritten. The default is false
- enumerable: Specifies whether attributes can be enumerated. The default value is false
- configurable: Specifies whether the attribute can be deleted or modified again. The default is false
2. What is the difference between deep copy and shallow copy?
- Deep copy, layer by layer copy; The shallow copy only copies the first layer, and the deep copy is only a reference.
- In a deep copy, the changes in the new object will not affect the original object, while in a shallow copy, the changes in the new object will follow the changes in the original object.
- In a deep copy, the original object does not share the same properties as the new object, but in a shallow copy, they have the same properties.