Preface
Most object-oriented languages and different, and does not introduce the concept before ES6 category (class) is, JavaScript is not directly but through the class constructor function to create an instance. Before introducing prototypes and prototype chains, it is necessary to review the knowledge of constructors.
One, the constructor
The purpose of the constructor pattern is to create a custom class and create an instance of this class. The constructor pattern has the concept of class and instance, and instances and instances are independent of each other, that is, instance identification.
A constructor is an ordinary function, and its creation method is no different from an ordinary function. The difference is that the first letter of the constructor is customarily capitalized . The other is the difference in calling methods, ordinary functions are called directly, and the constructor needs to use the new keyword to call .
function Person(name, age, gender) {
this.name = name
this.age = age
this.gender = gender
this.sayName = function () {
alert(this.name);
}
}
var per = new Person("孙悟空", 18, "男");
function Dog(name, age, gender) {
this.name = name
this.age = age
this.gender = gender
}
var dog = new Dog("旺财", 4, "雄")
console.log(per);//当我们直接在页面中打印一个对象时，事件上是输出的对象的toString()方法的返回值
console.log(dog);
Every time a Person constructor is created, a sayName method is added to each object in the Person constructor. That is to say, a new sayName method is created every time the constructor is executed. This leads to the creation of a new method when the constructor is executed once, and 10,000 new methods are created when executed 10,000 times, and the 10,000 methods are exactly the same. Why not put this method in a separate place, And make all instances accessible? This requires a prototype (prototype)
2. Prototype
In JavaScript , whenever a function data type (ordinary function, class) is defined, a prototype property is born. This property points to the prototype object of the function, and this property is the value of an object data type.
Let us use a diagram to show the relationship between the constructor and the instance prototype:
The prototype object is equivalent to a public area. All instances of the same class can access this prototype object. We can set the common content of the object into the prototype object.
Third, the prototype chain
1.__proto__ and const ructor
Each object data type (ordinary object, instance, prototype...) also has its own attribute __proto__, and the attribute value is the prototype of the class to which the current instance belongs. There is an attribute const ructor in the prototype object , which points to the function object.
function Person() {}
var person = new Person()
console.log(person.__proto__ === Person.prototype)//true
console.log(Person.prototype.constructor===Person)//true
//顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true
2. What is a prototype chain
In JavaScript, everything is an object, and there is also a relationship between objects and objects, which do not exist in isolation. The inheritance relationship between objects in JavaScript is to point to the parent object through the prototype object until it points to the Object object, thus forming a chain of prototype pointing, which is called the prototype chain in technical terms .
For example: person → Person → Object, ordinary people inherit humans, and humans inherit object classes
When we access a property or method of an object, it will first look for it in the object itself, if it has one, use it directly, if it doesn't, it will look for it in the prototype object, and if it finds it, it will use it directly. If not, look for the prototype of the prototype until the prototype of the Object object is found. The prototype of the Object object has no prototype. If it is still not found in the Object prototype, undefined is returned.
We can use the object's hasOwnProperty() to check whether the object itself contains the property; when using in to check whether the object contains a certain property, if there is none in the object but in the prototype, it will also return true
function Person() {}
Person.prototype.a = 123;
Person.prototype.sayHello = function () {
alert("hello");
};
var person = new Person()
console.log(person.a)//123
console.log(person.hasOwnProperty('a'));//false
console.log('a'in person)//true
The person instance does not have the attribute a. If the attribute a is not found in the person object, it will be searched from the prototype of person, which is person.__proto__, which is Person.prototype. Fortunately, the value of a is 123. If there is no such attribute in person.__proto__, how to find it?
When reading the properties of an instance, if it is not found, it will look for the properties in the prototype associated with the object. If it still cannot be found, it will look for the prototype of the prototype until the top-level Object is found. Object is js all types of data objects base class (class topmost) This property is not __proto__ on Object.prototype.
console.log(Object.prototype.__proto__ === null) // true
