`
我要阳光
  • 浏览: 60189 次
  • 性别: 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
分享到:
评论

相关推荐

    javascript类库prototype.js

    Prototype.js 是一个强大的JavaScript类库,它为开发者提供了丰富的功能,使得创建具有高度互动性和Web2.0特性的富客户端页面变得更为简单。这个库的设计理念是扩展JavaScript的基础对象,提供一套统一且易于使用的...

    prototype.js javaScript插件

    "Prototype.js"是一个针对JavaScript的开源库,旨在增强和扩展JavaScript的基本功能,尤其在处理DOM(文档对象模型)操作、事件处理以及Ajax交互时提供了极大的便利。 ### 1. Prototype.js核心概念 - **原型链**:...

    prototype_1.7.3.js 最新版本

    《prototype_1.7.3.js:JavaScript框架的里程碑》 在JavaScript的世界里,Prototype库是一个不可或缺的重要组成部分,尤其在Web开发领域,它为开发者提供了强大的功能和便利性。Prototype_1.7.3.js是这个库的一个...

    js遍历属性 以及 js prototype 和继承

    在JavaScript中,遍历属性、理解`prototype`和掌握继承机制是编程中不可或缺的基本技能。本文将深入探讨这些概念,并通过实例来加深理解。 首先,让我们来看如何遍历JavaScript对象的属性。JavaScript提供了多种...

    prototype js脚本库

    prototype js脚本库prototype js脚本库prototype js脚本库prototype js脚本库

    prototype的JS文件prototype的JS文件

    prototype的JS文件prototype的JS文件prototype的JS文件prototype的JS文件

    JavaScript的prototype

    JavaScript中的`prototype`是一个核心概念,它涉及到对象继承和函数原型。在JavaScript中,每创建一个函数,该函数就会自动获得一个名为`prototype`的属性,这个属性是一个对象,用于实现对象间的继承。同时,每个...

    prototypejs 1.7.3

    PrototypeJS,简称为Prototype,是一个广泛用于JavaScript编程的开源库,它为JavaScript语言引入了许多实用的类和方法,极大地提高了开发效率。版本1.7.3是这个库的一个稳定版本,其中包含了丰富的功能和优化。...

    prototype_PrototypeJS1.6_

    标题"prototype_PrototypeJS1.6_"中提到的"Prototype"是一个JavaScript库,它为JavaScript编程提供了一套丰富的工具集,主要用于简化DOM操作、创建Ajax应用以及实现对象的继承机制。"1.6版本"表明这是该库的一个特定...

    prototype.js简介

    **描述:** prototype.js 是一个JavaScript库,主要目的是为了简化JavaScript的开发,提升开发效率。它通过扩展JavaScript的基本对象和类型,提供了丰富的功能,包括类式继承、面向对象编程的支持以及一些实用的DOM...

    JS:prototype用法

    ### JS:prototype用法详解 #### 一、概念解析与基本使用 `prototype`是JavaScript中一个非常重要的概念,尤其自IE4及其后续版本引入以来,成为开发人员扩展内置对象功能的强大工具。`prototype`主要服务于面向...

    JS中的prototype

    JavaScript中的`prototype`是语言核心概念之一,它在对象创建、继承和方法共享中起着关键作用。在JavaScript中,每个对象都有一个`prototype`属性,这个属性引用了一个对象,通常用于实现对象间的继承。理解`...

    prototype-1.6.0.3.js+prototype1.4 、1.5中文手册+prototype1.6英文手册

    Prototype是JavaScript库,它为浏览器环境提供了强大的对象扩展和功能,尤其在处理DOM(文档对象模型)和Ajax交互时。这个压缩包包含了Prototype库的多个版本的手册和源代码文件,便于开发者理解和使用。 首先,...

    prototype.js 1.6

    《Prototype.js 1.6:JavaScript 动态对象增强库的深度解析》 Prototype.js 是一个广泛使用的 JavaScript 库,它为浏览器环境提供了许多实用的功能,尤其是在对象操作和事件处理方面。1.6 版本是该库的一个重要里程...

    prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版

    Prototype JavaScript 框架是Web开发中的一个关键工具,它为JavaScript编程提供了许多实用的类库函数和设计模式。这个“Prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版”正是面向希望深入学习和掌握...

    prototype.js

    《prototype.js:JavaScript框架的核心与应用》 在Web开发领域,JavaScript库和框架极大地提高了开发效率,其中Prototype.js就是一款非常流行的开源JavaScript框架。本文将深入探讨Prototype.js的核心概念、功能...

    prototype.js中文手册

    Prototype.js 是一个开源JavaScript库,由Sam Stephenson于2005年创建,主要用于简化DOM(文档对象模型)操作,增强JavaScript的面向对象编程能力,以及提供实用的函数扩展。它在Web开发中扮演着重要的角色,尤其在...

    Prototype-1.6.0 中文版\英文版\Prototype.js

    Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript语言增加了许多实用的功能,使开发Web应用程序变得更加简单。这个压缩包包含了Prototype的1.6.0版本,包括中文版和英文版的文档,以及源代码文件。 首先...

    prototype.js 1.6中文手册、prototype.js 1.6英文手册、

    Prototype.js 是一个开源的JavaScript库,它扩展了JavaScript语言,为开发者提供了许多便利的功能,特别是在对象操作、DOM操作和事件处理方面。1.6版本是该库的一个重要里程碑,引入了诸多改进和新特性。 ### 1. ...

Global site tag (gtag.js) - Google Analytics