JS原型动态特性实现方法

来源：懂视网责编：小采时间：2020-11-27 19:58:01

JS原型动态特性实现方法

JS原型动态特性实现方法:在学习JS的时候，我遇到了函数和实例对象对原型修改的相关问题，与大家共分享，希望能帮助到大家。例子1：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原型的动态

推荐度：

点击下载本文 文档为doc格式

导读JS原型动态特性实现方法:在学习JS的时候，我遇到了函数和实例对象对原型修改的相关问题，与大家共分享，希望能帮助到大家。例子1：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原型的动态

在学习JS的时候，我遇到了函数和实例对象对原型修改的相关问题，与大家共分享，希望能帮助到大家。

例子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>

在案例中，使用了Person.prototype对原型进行了重定向，旧原型与函数断绝了关系，函数的原型只想新原型，所以新创建的实例对象p2打印出来的是“一个人的女团”

例子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>

在案例中，p1.prototype无法对函数和其自己的原型进行重定向，只是给自己添加了一个prototype属性。所以 p1.say() 与 p1.prototype.say() 打印出来结果不一致

例子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>

在案例中，使用了p1.__proto__对p1的原型进行了重定向，所以p1与p2中的say()打印出来的不同了

从三个案例中，我得出以下几个结论：

(1) 函数名.prototype可以对函数的原型进行重定向，旧原型与函数会断绝关系

(2) 对象名.prototype无法对函数的原型进行重定向，只会为实例对象添加一个prototype属性（若实例对象没有prorotype属性的情况）

(3) 对象名.__proto__能对该对象的原型进行重定向，但是无法改变函数创建出来的其他实例对象的原型

(4) prototype为函数名调用，可以对原型进行重定向

(5) __proto__为对象名调用，可以对该对象的原型进行重定向，但是不影响函数和其他实例对象的原型。