Constructor
I wrote this content once before, but when I came to review this knowledge, I felt that the writing was not good, so I decided to write it again to review it. But read several articles. It's that everyone's style is different. The starting point of knowledge points is not the same. So I think it's easy to mention.
First look at how the constructor is created
function obj(name){
this.name = name;
}
obj.add = (x,y) =>{
return x+y
}
var Person = new obj('lly');
console.log(Person.name)
console.log(Person.name)
In the above code, obj is a constructor, which creates an object through new.
There are two other knowledge points that need to be understood. Instance member and static member
Instance member : It is an attribute added through this inside the constructor, we call it an instance member. Instance members can only be accessed by creating objects with new.
Static member: It is an attribute added externally by the constructor, we call it a static member; static members cannot be accessed through new, but can be called directly through the constructor to see the
code
function obj(name){
this.name = name; //实例成员
}
obj.age = 20; //静态成员
let o = new obj('cyd');
console.log(o.age) //undefind
console.log(o.name) // cyd
console.log(obj.name) //obj
console.log(obj.age) //20
One thing we need to pay attention to here is that when the instance member is directly accessed by the constructor, the name of the constructor is returned. obj in the above code.
javascript prototype
Before we start, let's talk about a few key points. Remember that it is convenient to understand
prototype later : this property that only functions have is called prototype. Subsequent inheritance also requires it.
proto : There will be attributes in the object pointing to the prototype, as well as in the function, because the function is also an object.
The constructor constructor, why is it called a constructor, because it can be used to obtain the constructor.
Above, let's briefly remember these keywords. Let's explain in detail below.
prototype
Let's look at the following code
function obj(name){
this.name = name;
}
obj.prototype.printName = function(x,y){
return x+y
}
var Person = new obj('lly');
console.log(obj.prototype)
//打印如下图
I mentioned that the prototype is a prototype, why? Because of the prototype it points to, what we get through obj.prototype is the prototype, and the prototype is displayed by an object. There is a sentence obj.prototype.printName
in the above code , which means to add a printName method to the prototype, so you will see the printName method on the prototype printed below . Then let's see that there are two other attributes on this prototype. Constructor and __proto__ here, in order to correspond to the above order, first say __proto__.
proto
As we said above, it will be an attribute that all objects will have. When the object accesses this property, it points to the prototype object, and the code is on the second.
function obj(name){
this.name = name;
}
obj.prototype.printName = function(x,y){
return x+y
}
let o = new obj('cyd');
console.log(o.__proto__)
It's exactly the same, which confirms that __proto__ also points to the prototype object. Then you can get a result
console.log(o.__proto__ == obj.prototype) //true
constructor
We said above that constructor is a constructor. why? Secondary on the code
function obj(name){
this.name = name;
}
obj.prototype.printName = function(x,y){
return x+y
}
let o = new obj('cyd');
console.log(o.__proto__.constructor)
console.log(obj.prototype.constructor)
//结果如下
Seeing this, we can understand why it is called a constructor, because we can get its constructor obj by using the prototype object to access the constructor . So we call him the constructor. we have another result
console.log(o.__proto__.constructor == obj) //true
console.log(obj.prototype.constructor == obj) //true
As we said above, functions can also access __proto__. It is meaningless to directly access functions, so we won’t discuss them here.
prototype chain
After understanding the above content, it is very simple to understand the prototype chain. What we can know is that every object has a __proto__, and our prototype is also an object, so where does the __proto__ of the prototype object point to. Secondary on the code
function obj(name){
this.name = name;
}
obj.prototype.printName = function(x,y){
return x+y
}
let o = new obj('cyd');
console.log(o.__proto__.__proto__)
console.log(o.__proto__.__proto__.constructor)
Oh well, what is returned is still a prototype object, and the constructor is Object (to explain here, Object is the fundamental prototype object, and all the object methods we access come from here, such as object.create, assign, etc. ) It’s like we didn’t create this method but we can access it.
Let's first look at what the __proto__ of the prototype object of this Object is.
console.log(o.__proto__.__proto__.__proto__) // null
nullEmpty. It turns out that Object is the boss of the prototype. There is no greater one above him. So when we look for it, it can only be null. Such a layer-by-layer search forms a prototype chain.
look at the picture
Small theater:
In a family of three generations, Xiao Ming wanted an apple, so he asked his father for it, but his father didn't have it, so he asked his father's father for it. It turned out that his father's father had one, that is, his grandfather had an apple, so he gave it to him.
Object other knowledge points
Inheritance
As mentioned above, prototype can be used for inheritance. In the end is how to inherit that. Secondary on the code
function obj(name){
this.name = name;
this.add = function(x,y){
return x+y
}
}
obj.prototype.product = function(x,y){
return x*y
}
function obj2(age,name){
obj.call(this,name);
this.age = age
}
let a = new obj('lly');
let b = new obj2(20,'cyd');
console.log(a.name) //lly
console.log(b.name) // cyd
console.log(b.add(5,5)) //10
console.log(b.product(2,5)) //Uncaught TypeError: b.product is not a function
In the above code, we use call to implement the inheritance of instance members. But seeing the prototype, there is no way to inherit. How can the prototype object be inherited? We said above that prototype inheritance needs it, so let's try it.
function obj(name){
this.name = name;
this.add = function(x,y){
return x+y
}
}
obj.prototype.product = function(x,y){
return x*y
}
function obj2(age,name){
obj.call(this,name);
this.age = age
}
obj2.prototype = Object.create(obj.prototype);
obj2.prototype.ls = function(x){
return x
}
let a = new obj('lly');
let b = new obj2(20,'cyd');
console.log(a.name) //lly
console.log(b.name) //cyd
console.log(b.add(5,5)) // 10
console.log(b.ls(3)) // 3
console.log(b.product(2,5)) //10
Just add **obj2.prototype = obj.prototype;** to achieve prototype inheritance.
Having said so much, it is still es5. Let's talk about es6.
ES6 introduces the concept of class. class. Let's take a look at how to use it first. Secondary on the code
class obj{
constructor(name){
this.name = name
}
add(x,y){
return x+y
}
}
let a = new obj('lly');
console.log(a.name) //lly
console.log(a.add(5,2)) // 7
The above is the basic use of class. The class must be used in a new way. All methods in the class are placed on the prototype.
You can print it out and have a look
class obj{
constructor(name){
this.name = name
}
add(x,y){
return x+y
}
}
let a = new obj('lly');
let b = new obj('cyd');
console.log(a.__proto__ == b.__proto__) //true
Class can implement inheritance through the extends keyword, which is much clearer and more convenient than ES5's inheritance by modifying the prototype chain.
lass obj{
constructor(name){
this.name = name
}
add(x,y){
return x+y
}
}
class obj2 extends obj{
}
let p = new obj2('cyd');
console.log(p.name) // cyd
Summarize
I'm sorry I didn't make a summary, but I'll leave the summary to you.