视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS原型动态特性实现方法
2020-11-27 19:58:01 责编:小采
文档

在学习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__为对象名调用,可以对该对象的原型进行重定向,但是不影响函数和其他实例对象的原型。

下载本文
显示全文
专题