例子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中文网其它相关文章!

php中文网最新课程二维码