`
我要阳光
  • 浏览: 59556 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

JS prototype误区浅谈

    博客分类:
  • js
阅读更多
最近研究了一下js中的prototype,发现网上很多对prototype的误解,下面是我的一些心得。

1. 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在同一内存地址



不过如果你这样写的话,就会出现奇怪的一幕

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);//软件   故输出的原型中的变量




2. 对象的构造函数不是由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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics