Javascript 函数 prototype属性

最新推荐文章于 2022-07-09 18:00:00 发布

翻译最新推荐文章于 2022-07-09 18:00:00 发布 · 665 阅读

Javascript_高级专栏收录该内容

9 篇文章

订阅专栏

本文通过多个测试案例深入探讨了JavaScript中的原型与继承机制，包括如何定义类的原型属性、对象如何查找属性以及属性覆盖等问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
/*测试1
function Test(){}
Test.prototype.num = 3;
var inst1 = new Test();
var inst2 = new Test();
Test.prototype.num = 4; // 所有指向Test.prototype.num的值。
var p1 = inst1.num; // 4
var p2 = inst2.num; // 4
alert(p1);
alert(p2);*/

/*测试2
function Test(){};
Test.str = 'str';
Test.fun = function(){return 'fun';};
var r1 = Test.str; // str
var r2 = Test.fun; // fun
alert("r1:" + r1 + ",r2:" + r2);
var inst = new Test();
var r3 = inst.str; // undefined
var r4 = inst.fun; // undefined
alert("r3:" + r3 + ",r4:" + r4);*/

/*测试3
//prototype就是一个作用于类的属性。默认情况下，
//所有Javascript类都会有一个prototype属性，但是类实例没有
function Test() { };
Test.prototype.str = 'str';
Test.prototype.fun = function () { return 'fun'; };
var r1 = Test.prototype.str;
var r2 = Test.prototype.fun;
alert("r1:" + r1 + ",r2:" + r2);
var inst = new Test();
var r3 = inst.str; //类实例没有prototype属性,直接可以点出来
var r4 = inst.fun;
alert("r3:" + r3 + ",r4:" + r4);*/

/*测试4
//在Javascript中，当我们取一个对象中并不存在的属性或是方法时，
//它会试图查看该对象所对应的类中的prototype属性中是否包含该属性或是方法，
//而prototype也是一个Javascript对象，若是其中也没有，
//该prototype又会访问它对应的类的prototype，如此一级级地向上访问，
//直到找到需要的属性或方法，或是prototype属性为null。
function Test(){};
Test.test = 'str';
function pt1()
{ this.test1 = 'pt1'; };
function pt2()
{ this.test2 = 'pt2'; };
pt2.prototype.test3 = 'test3';
pt2.prototype.test1 = 'test4';
pt1.prototype = new pt2();
Test.prototype = new pt1();
var inst = new Test();
var p1 = inst.test; // undefined
var p2 = inst.test1; // pt1 而不是 test4
alert(p2);
var p3 = inst.test2; // pt2
alert(p3);
var p4 = inst.test3; // test3
alert(p4);*/

/*测试5
//前面说过，prototype是类的一个属性。更改prototype中的属性值，有可能会带来意想不到的灾难！
function Test(){}
Test.prototype.num = 3;
var inst1 = new Test();
var inst2 = new Test();
Test.prototype.num = 4; // 所有指向Test.prototype.num的值。
var p1 = inst1.num; // 4
var p2 = inst2.num; // 4
inst1.num = 5; // 赋值，会为inst对象创建一个num属性。
Test.prototype.num = 6; // 所有指向Test.prototype.num的值。
var p3 = inst1.num; // 5 这里返回的是刚创建的inst1.num的值，而不是Test.prototype.num的值。
var p4 = inst2.num; // 6
delete Test.prototype.num;
var p5 = inst1.num; // 5 inst1.num依然存在。
var p6 = inst2.num; // undefined Test.prototype.num 被删除了。
*/
</script>
</head>
<body>

</body>
</html>