Methods to implement dynamic features of JS prototype-JS Tutorial-php.cn

Methods to implement dynamic features of JS prototype

小云云

Release： 2018-03-28 17:24:46

Original

1425 people have browsed it

When I was learning JS, I encountered problems related to prototype modifications by functions and instance objects. I would like to share them with you, hoping to help everyone.

Example 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原型的动态特性1</title>
</head>
<body>
</body>
<script>
// 创建一个函数
var Person = function() {};

// 给函数的原型添加一个方法
Person.prototype.say = function() {
console.log("下雪的季节...");
};

// 创建第一个实例对象
var p1 = new Person();

// 修改原型中的方法（true）
Person.prototype = {
say: function() {
console.log("一个人的女团...");
}
};

// 创建第二个实例对象
var p2 = new Person();

// 打印p1与p2中的say方法
p1.say(); /* 下雪的季节 */
p2.say(); /* 一个人的女团 */
</script>
</html>

Copy after login

In the case, Person.prototype is used to redirect the prototype. The old prototype is severed from the function, and the prototype of the function only wants the new prototype. , so the newly created instance object p2 prints "a girl group of one person"

Example 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原型的动态特性2</title>
</head>
<body>
</body>
<script>
// 创建一个函数
var Person = function() {};

// 给函数的原型添加一个方法
Person.prototype.say = function() {
console.log("下雪的季节...");
};

// 创建第一个实例对象
var p1 = new Person();

// 修改p1原型中的方法（false）
p1.prototype = {
say: function() {
console.log("一个人的女团...");
}
};

// 创建第二个实例对象
var p2 = new Person();

// 打印p1与p2中的say方法
p1.say(); /* 下雪的季节 */
p1.prototype.say();/* 一个人的女团，此处调用的是实例对象自己的prototype属性中的方法 */
p2.say(); /* 下雪的季节 */
</script>
</html>

Copy after login

In the case, p1.prototype cannot compare the function and other Redirect your own prototype, just add a prototype attribute to yourself. Therefore, the printed results of p1.say() and p1.prototype.say() are inconsistent

Example 3:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原型的动态特性2</title>
</head>
<body>
</body>
<script>
// 创建一个函数
var Person = function() {};

// 给函数的原型添加一个方法
Person.prototype.say = function() {
console.log("下雪的季节...");
};

// 创建第一个实例对象
var p1 = new Person();

// 修改p1原型中的方法（true）
p1.__proto__ = {
say: function() {
console.log("一个人的女团...");
}
};

// 创建第二个实例对象
var p2 = new Person();

// 打印p1与p2中的say方法
p1.say(); /* 一个人的女团 */
p1.__proto__.say();/* 一个人的女团 */
p2.say(); /* 下雪的季节 */
</script>
</html>

Copy after login

In the case, p1.__proto__ was used to redirect the prototype of p1, so the printouts of say() in p1 and p2 are different

From the three cases, I concluded The following conclusions:

(1) Function name.prototype can redirect the prototype of the function, and the old prototype will be severed from the function

(2) Object name.prototype The prototype of the function cannot be redirected. Only a prototype attribute will be added to the instance object (if the instance object does not have a prototype attribute)

(3) The object name.__proto__ can redirect the prototype of the object. Orientation, but cannot change the prototypes of other instance objects created by the function

(4) prototype is called as the function name, and the prototype can be redirected

(5) __proto__ is called as the object name , the prototype of the object can be redirected, but the prototypes of functions and other instance objects will not be affected.

The above is the detailed content of Methods to implement dynamic features of JS prototype. For more information, please follow other related articles on the PHP Chinese website!