Rumah  >  Artikel  >  hujung hadapan web  >  JS原型动态特性实现方法

JS原型动态特性实现方法

小云云
小云云asal
2018-03-28 17:24:461459semak imbas

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

Atas ialah kandungan terperinci JS原型动态特性实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn