JS prototype误区浅谈

最近研究了一下js中的prototype,发现网上很多对prototype的误解,下面是我的一些心得。

[size=xx-large]1[/size]. prototype原型是基于类型的,而不是基于实例的。


var newLine = "</br>"

function App(){
this.appName = "应用";
}
App.prototype.type = "软件";

var a1 = new App();
var a2 = new App();

document.write(a1.type+newLine);//软件
document.write(a2.type+newLine);//软件

App.prototype.type = "电焊";

document.write(newLine);

document.write(a1.type+newLine);//电焊
document.write(a2.type+newLine);//电焊

//此时两个对象的type属性是指向同一内存地址的。
//在访问type属性时,解释器先在a1 a2中寻找,未找到后,向类型的原型中寻找,最终找到原型的type属性,所以两个对象的type在同一内存地址



[size=large]不过如果你这样写的话,就会出现奇怪的一幕[/size]


var newLine = "</br>"

function App(){
this.appName = "应用";
}
App.prototype.type = "软件";

var a1 = new App();
a1.type = "软件1";
var a2 = new App();
a1.type = "软件2";

document.write(a1.type+newLine);//软件1
document.write(a2.type+newLine);//软件2

//这样可能会给你造成,每个对象拥有一个prototype属性,随创建时隐式创建,并且每一个实例有一个type属性的误解。
//其实是这样的,在你读type属性的时候,在实例中找不到,沿原型链向上,在类型原型里找到,故type是同一内存地址
//但是在写入的时候,在实例中找不到,不会沿原型链向上,而是在本地创建了一个同名变量,所以出现了上面的效果


所以说prototype是针对与类型的,所有实例的原型属性都是同一个对象的,至不过让你修改的时候,实例在自己内部重新创建了一个新变量,给你了每一个实例都有一个原型的错觉。
所以



var newLine = "</br>"

function App(){
this.appName = "应用";
}
App.prototype.type = "软件";

var a1 = new App();
a1.type = "软件1";
var a2 = new App();
a1.type = "软件2";

document.write(a1.type+newLine);//软件1
document.write(a2.type+newLine);//软件2

delete a1.type ;//删除的是实例中的type属性 原型的并没有被改变
document.write(a1.type+newLine);//软件 故输出的原型中的变量




[size=xx-large]2[/size]. 对象的构造函数不是由constructor指定的


<script language="javascript" type="text/javascript">
newLine = "</br>"

function App(){
this.appName = "应用";
alert("调用App");
}

function FApp(){
}

var a = new App(); //调用App
alert(a.hasOwnProperty("constructor")); //false 首先App的实例中是没有constructor属性的
alert(a.constructor);//是从原型中得到的属性constructor,在定义类型时,原型的constructor属性被自动指向类型的构造函数

//故 如果我们这样做
App.prototype = new FApp();
alert(App.prototype.constructor);//输出的是FApp(),因为类型的原型变成了 FApp实例,而FApp实例的constructor是FApp()
//但是我们在创建App实例的时候仍然调用App()

var a2 = new App(); //调用App()


</script>


那么constructor到底有什么用呢,是为了维持了正常的原型链,并且在你想知道构造函数的时候可以查的到。(这个是我在网上搜到的一些理解)

初步接触js,有错误望指正!!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值