JS原型动态特性实现方法
程序员文章站
2022-05-21 19:18:06
...
在学习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__为对象名调用，可以对该对象的原型进行重定向，但是不影响函数和其他实例对象的原型。
以上就是JS原型动态特性实现方法的详细内容，更多请关注其它相关文章！