首頁 > 文章 > web前端 > JS原型動態特性實作方法

JS原型動態特性實作方法

小云云原創: 2018-03-28 17:24:461458瀏覽

在學習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原型動態特性實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：node的靜態檔案伺服器如何使用下一篇：node的靜態檔案伺服器如何使用

看更多