Before talking about prototype chains, we must first understand what the relationship is between custom functions and functions, and what are the inextricable relationships between constructors, prototypes and instances? In fact, all functions are instances of Function. There is a prototype property prototype on the constructor, which is also an object; then there is a constructor property on the prototype object, which points to the constructor; and there is a _proto_ property on the instance object, which also points to the prototype object, and this property is not a standard property and cannot be used in programming. This property is used internally for browser use.
// _proto_ There is a property prototype in the function. The object created by this function will be connected to the property by default. // The relationship between prototype and _proto___ is from the object perspective, prototype is from the constructor perspective.
Below, let’s look at the picture and speak.
1. The relationship between constructor, prototype and instance
①+Object
②+Function+Object+Array
After understanding these, let’s discuss what a prototype chain is. To put it bluntly, it is actually a finite chain formed between a finite instance object and a prototype, which is used to implement shared attributes and inheritance. Next, let's look at the code to speak.
var obj = new Object(); The object is a prototype object with a prototype object and a prototype object obj._proto_._proto_._proto_._proto__proto_ also has a prototype object. The prototype object of the object keeps looking up and you will find a null// Prototype chain example var arr = []; arr -> Array.prototype -> Object.prototype -> null var o = new Object(); o -> Object.prototype -> null; function Foo1(){ this.name1 = '1';}function Foo2(){ this.name2 = '2';}Foo2.prototype = new Foo1();function Foo3(){ this.name = '3';}Foo3.prototype = new Foo2();var foo3 = new Foo3();console.dir(foo3);Next is the inheritance issue.
2. Inheritance
1) Prototype inheritance
function Animal(name){ this.name = name; } function Tiger(color){ this.color = color; }// var tiger = new Tiger('yellow');// console.log(tiger.color);// console.log(tiger.name); //undefined// Tiger.prototype = new Animal('tiger'); //One way Object.prototype.name = 'big tiger'; //The second way var tiger = new Tiger('yellow'); console.log(tiger.color); console.log(tiger.name);It is worth noting that there are two main problems here: ① It is not convenient to pass parameters to the parent type; ② The reference types in the parent type are shared by all instances
2) ES5 provides the Object.create() method to implement inheritance
―――Compatible //shim shim function create(obj){ if(Object.create){ return Object.create(obj); }else{ function Foo(){} Foo.prototype = obj; return new Foo(); } }This method is a new feature of ES5, which is actually copying and inheriting.
3) Copy inheritance
var obj = {}; obj.extend = function(obj){ for(var k in obj){ this[k] = obj[k]; } }4) Borrowing constructor inheritance - the members on the prototype in the borrowed constructor are not borrowed
function Animal(name){ this.name = name;}function Mouse(nickname){ Animal.call(this,'mouse'); this.nickname = nickname;}var m = new Mouse('Jerry');console.log(m.name);console.log(m.nickname);Existing problem: It can solve the problem of passing parameters in prototype inheritance, but members (attributes and methods) on the prototype object in the parent type cannot be inherited to
5) Combination inheritance-prototype object is dynamic
function Person(name){ this.name = name;}Person.prototype.showName = function(){ console.log(this.name);}function Student(name,age){ Person.call(this,name); this.age = age;}Student.prototype = new Person();Student.prototype.contructor = Student;Student.prototype.showAge = function(){ console.log(this.age);}var stu = new Student('Zhang San',12);stu.showName();stu.showAge();[Prototype inheritance + borrow constructor inheritance] Its characteristic is that one copy of the attributes per instance, and the method is shared
[Summary] To put it in a very rough sentence, the so-called prototype chain is a way of behavior of finding a mother, and it can be understood that people are born by human beings, and monsters are born by demons. There is actually only one core of the prototype chain: attribute sharing and independent control. When your object instance needs independent attributes, the essence of all practices is to create attributes in the object instance. If you don't think too much, you can directly define the independent attributes you need in Person to overwrite the properties of the prototype. In short, when using prototype inheritance, you should pay special attention to the attributes in the prototype, because they are all existences that affect the whole body. The most common method now is the combination mode.
1. Prototype chain
1) The relationship between constructor, prototype and instance
①The constructor has a property prototype, which is an object (an instance of an Object). ②The prototype object has a constructor attribute, which points to the constructor function to which the prototype object belongs. ③The instance object has a _proto_ attribute, which also points to the prototype object of the constructor. It is a non-standard property and cannot be used for programming. It is used by the browser itself. 2) The relationship between prototype and _proto_
①Prototype is a property of the constructor
②_proto_ is the attribute of the instance object
- Both point to the same object
[Summary] i) Functions are also objects, and objects are not necessarily functions;
ii) The essence of an object: an unordered set of key-value pairs; the values in the key-value pairs can be values of any data type
iii) Object is a container, and the container contains (properties and methods)
3) Attribute search
① When accessing a member of the object, you will first look for whether it exists in the object.
②If there is no current object, look for it in the prototype object of the constructor
③If the prototype object is not found, look for the prototype of the prototype object
④ Know that the prototype of the Object prototype object is null
2. Function
- All functions are instances of Function
① Local object: Object independent of the host environment (browser) - including Object, Array, Date, RegExp, Function, Error, Number, String, Boolean
② Built-in objects - including Math and Global (window, which is a global variable in js), and new is not needed when using it.
③Host object—including custom objects, DOM, BOM
The above is the full description of how to understand the JS prototype chain introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!