If the method is created, it should not be created inside the constructor; instead, it should be created outside and called inside the constructor, which will save a lot of space.
Example explanation:
Question: Create a Persion constructor and add the sayName method to each object
If it is created inside the constructor (as in Example 1), a new sayName method will be created every time the constructor is executed. This is completely unnecessary, and they can share the same one (as in Example 2).
//例1：修改前
function Persion(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
//向对象中添加一个方法
this.sayName = function(){
alert("Hello,我是:",this.name);
};
}
//创建一个Persion的实例
var per = new Persion("孙悟空",18,"男");
var per2 = new Persion("猪八戒",19,"男");
console.log(per.sayName == per2.sayName);//返回结果是false
//例2：修改后
function Persion(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
//向对象中添加一个方法
this.sayName = fun;
}
//将sayName方法在全局作用域中定义
function fun(){
alert("Hello,我是:",this.name);
};
//创建一个Persion的实例
var per = new Persion("孙悟空",18,"男");
var per2 = new Persion("猪八戒",19,"男");
console.log(per.sayName == per2.sayName);//返回结果是ture
However, if the function is defined in the global scope, there will be new problems: it
pollutes the namespace of the global scope, and it is not safe
Solution: use prototype objects
For every function we create, the parser will add a property prototype to the function, this property corresponds to an object, this object is what we call the prototype object
If the function is called as a normal function, the prototype has no effect
When a function is called in the form of a constructor, there will be an implicit attribute in the object it creates that points to the prototype object of the constructor. We can access the attribute through __proto__ (two underscores before and after)
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.
Add syntax:
//添加属性
构造函数名.prototype.属性 = 属性值;
//添加方法
构造函数名.prototype.方法 = function(){
语句;
};
Access sequence:
When we access the properties or methods of an object, it will first look in the object itself, if there is, then use it directly;
if not, it will look in the prototype object, if it finds it, use it directly
function MyClass() {
}
//向MyClass的原型对象中添加属性a
MyClass.prototype.a = 123;
//向MyClass的原型对象中添加一个方法
MyClass.prototype.sayHello = function() {
alert("Hello");
};
var mc = new MyClass();
console.log(mc.__proto__ == MyClass.prototype); //true
When using in to check whether an object contains a certain property, if there is none in the object but there is in the prototype, it will also return true
Use the object's hasOwnProperty() method to check whether the object itself contains the property, and return true only if the object itself contains
The hasOwnProperty() method is in the prototype of the prototype.
The prototype of the Object object has no prototype, if it is still not found in the Object, it will return undefined
You can modify the toString method
function MyClass() {
}
MyClass.prototype.name = "原型中的名字";
var mc = new MyClass();
console.log("name" in mc);//true
console.log(mc.hasOwnProperty("name"));//false
//修改MyClass原型的toString 方法
MyClass.prototype.toString = function() {
return "MyClass类的toString方法已被修改";
};