Remember one sentence: everything is an object
For prototypes and prototype chains, we need to know the following: function objects, instance objects, prototype objects
1) Function object - is the usual object;
2) Instance object - new object or { };
3) Prototype object - all function objects must have a corresponding prototype object, and all prototype objects are created by the Object function object.
1. Prototype
The prototype is an object, which is a property prototype of the function;
Objects instantiated through this function can inherit all the properties and methods on the prototype
The prototype object has an attribute constructor by default, the value is the corresponding constructor; in addition, there is an attribute __proto__, the value is Object.prototype
There are related introductions later! ! !
2. Prototype chain
Concepts: (1) Creation of objects (2) Organizational structure of objects (3) Regulations on object access members
Everything in JavaScript is an object, and objects do not exist independently, but there is a certain relationship between objects.
The prototype object (function.prototype) pointed to by the object __proto__ attribute is searched layer by layer until the prototype object (Object.prototype) of Object is found. The link structure inherited layer by layer is called the prototype chain (through the proto attribute Form the chain structure of the prototype, the technical term is called the prototype chain)
There are related introductions later! ! !
3. Constructor
①The constructor itself is also a function
② For constructors, the first letter of the function name should be capitalized as much as possible (in order to distinguish between ordinary functions and constructors)
③ this in the constructor points to the instantiated object
④ The constructor needs to be called with the new keyword
Among them, the new keyword mainly does?
1. Instantiate an object:
eg: var variable a= new son(1); variable a represents the instantiated object
2. Point this to the instantiated object eg:this—>a
3. Point the __proto__ of the instantiated object to the prototype object of the constructor
4. Add properties and methods to instantiated objects
eg: this keyword added
5. Return this implicitly
Examples are as follows:
Four, the relationship between the above
1. This picture is very important: no matter how the code changes, the substantive things are developed in the picture
We use a graph to represent the relationship between them, followed by related analysis:
function Str(sprot,prise){
this.mysprot=sprot;
this.myprise=prise;
this.say=function(){
console.log("实例化对象上的方法");
}
}
var s1=new Str("篮球",20);//实例化对象s1
var s2=new Str("羽毛球",30);//实例化对象s2
1. We must keep in mind one source : the Function function object automatically generates the first object
2. Except for the Function object, all function objects are created by the Function object.
3. Function will automatically create many function objects
4. The first object automatically created by Function is the Object object function, and the function objects automatically created by Function include a series of built-in function objects such as Object, window, Date, etc. The function objects written by ourselves are also created by Function.
Among them, we can know according to the code: Object and the Show function we set ourselves are created by Function
Note: Math is not a function object, but an instance object
5. All function objects must have a corresponding prototype object, and all prototype objects are created by the Object function object
6. All function objects have a reference type variable named prototype , which is a member of the function object, and its value is the reference value of the corresponding prototype object, that is, prototype points to the prototype object .
7. All prototype objects have a reference type variable named constructor , which is a member of the prototype object, and the value of the reference type variable is the reference value of the corresponding function object, that is, the constructor points to the function object
8. The instance object is created by the corresponding function object (the function from new).
9. All objects have a reference type variable named __proto__ , which is a member of the object
10. __proto__ in the Function function object points to the Function prototype object
11. The value of __proto__ in the Object function object is null.
1. The value of __proto__ in the object is the reference value of which object? That is, which object does it point to? divided into three
(1) __proto__ in the Function function object points to the Function prototype object
(2) The value of __proto__ in the Object prototype object is null
(3) In addition to the Function function object and the Object prototype object, the __proto__ in the object points to ~~~ Whoever creates the object to which __proto__ belongs points to whose prototype object
2. The process of object accessing members:
1) If there is such a member in the current object, it should go to this member, and the access ends;
2) If there is no such member in the current object, find the member in the object pointed to by __proto__, and end if found, if not found, continue to search through the object pointed to by __proto__.
If there is a prototype in an object, the object must be a function object, and if the object is a function object, there must be a proyotype in it
If there is a constructor in an object, the object must have a prototype object, and if the object is a prototype object, there must be a constructor in it
2. The relationship between prototype, __proto__, and constructor
prototype: the prototype (prototype object) points to the prototype
__proto__: points to the prototype
constructor: attribute on the prototype: points to the constructor
①Each object has an implicit attribute (__proto__), and the attribute value is essentially an ordinary object
②Each function object has a prototype attribute (prototype), and the attribute value is essentially an ordinary object
③The __proto__ of each object points to the prototype object of the constructor (prototype)
④ There is a constructor attribute on the prototype object, pointing to the constructor
//万物皆对象,实例化也是一个对象，看它是否指向构造函数Str的prototype原型对象，实例化对象是由构造函数创建的
console.log(s1.__proto__);//指向str的原型对象
console.log(Str.prototype);//指向str的原型对象
console.log(s1.__proto__ === Str.prototype);//true
console.log(s2.__proto__);//指向str的原型对象
console.log(Str.prototype);//指向str的原型对象
console.log(s2.__proto__ === Str.prototype);//true
//Str也是一个对象，有一个隐式的属性(__proto__)，构造函数的原型对象是由Object创建的
console.log(Str.prototype.__proto__);//指向Object的原型对象
console.log(Object.prototype);//指向Object的原型对象
console.log(Str.prototype.__proto__ === Object.prototype);//true
//Object也是一个对象，有一个隐式的属性(__proto__)，Object的原型对象__proto__ 为null
console.log(Object.prototype.__proto__);//null,指向为空3. Combat conclusion
1. The members of the prototype object of Object can be accessed by all objects. Object is the end of the prototype chain, and the prototype object of Object can be obtained through Object.prototype.
Example: Object.prototype.show(){.......}, all objects can access the...... in the show function.
2. All prototype objects are created by Object function objects.
3. The new object is created by the function object.
4. All objects have their own attribute __proto__, and __proto__ points to an object
5. __proto__ is special in the Object prototype object, and its value is null
6. The __proto__ special column in the Function function object points to the Function prototype object.
7. There are prototype attributes in all function objects, and there are no prototype objects and new objects.
8. The prototype always points to the corresponding prototype object.
code show as below:
function Fun(){
this.a=1;
}
Fun.prototype={ //fun的原型对象
aa:10,
constructor:Fun //做一个指向，不然后面有关的constructor都为false，可以知道Fun是由Fun构造出来的
}
var fn1=new Fun();//实例化创建一个新函数，实例化对象为fn1
console.log(fn1.aa); //10
console.log(Object.prototype);
console.log(Fun.prototype.__proto__);
console.log(Object.prototype.__proto__); //null
//访问原型有两种方式：一是通过实例方式，二是通过构造函数
console.log(fn1.__proto__ === Fun.prototype);//true
//Object.prototype是Fun.prototype的父亲，Fun.prototype是fn1.__proto__的父亲
//Object.prototype是原型的终点
console.log(Object.prototype === fn1.__proto__);//false
console.log(Object.prototype === fn1.__proto__.__proto__);//true
//等于console.log(Object.prototype === Fun.prototype.__proto__);
//实例上的能拿到原型上的属性和方法
console.log(Fun.prototype.constructor === Fun);//true(若没有做constructor指向，则为false，没有定义)
console.log(fn1.constructor === Fun);//true(若没有做donstructor指向，则为false，没有定义)
console.log(Object.prototype.constructor === Object);//true
console.log(Object.getPrototypeOf(fn1) === Fun.prototype);//true