再谈JavaScript中对象的prototype链

ECMAScirpt可以识别两种类型的对象:

    1.Navtive Object 指语言级别的对象

    2.Host Object 有运行环境提供如:document

 

Native objects是一种松散的结构并且可以动态的增加属性(property),所有的属性都有一个名字和一个值,这个值可以是另一个对象的引用,或者内建的数据类型(String ,Number,Boolean,Null,Undefined).

 

下面我们通过一个简单的例子,来看看一个JavaScript是如何设置一个属性的值和读取一个属性的值。

var objectRef = new Object();//create a generic javascript object

下面来为该对象添加属性:

objectRef.testNumber = 5;
/* - or:- */
objectRef["testNumber"] = 5; 

一个名为testNumber的属性就这样被创建。

如果赋值的属性的名称已经存在,那么就不会再次创建这个属性,赋值操作仅仅是重新设置属性的值objectRef.testNumber = 8;
/* - or:- */
objectRef["testNumber"] = 8; 

 

JavaScript对象的原型(prototype)本身也是对象,也可以有属性(property),对于JavaScript对象的prototype的赋值操作更普通的对象没有什么不同,那么对于取值操作来说就不同了,下面我们具体来看取值操作:

 

取值操作

在取值操作中prototype和property就不一样了,首先来看最简单的取值操作.

/*为一个对象的属性赋值,如果这个对象没有这个属性,那么在赋值操作后,这个对象就有这个属性了 */
objectRef.testNumber = 8;
/* 读出这个属性的值 */
var val = objectRef.testNumber;

/* 现在val 就得到了刚才赋予objectRef的值8了*/

prototype揭密

 

 

我们首先整明白这几句话

  1. 所有的对象都可以有prototypes。
  2. prototypes自己也是对象,那么他也可以有prototypes,这样循环下去就形成了一个prototype链。
  3. 这个链当他遇到链中队形的prototype是null时中止。(Object的默认的prototype是null)

下面具体来看代码:

var objectRef = new Object(); //create a generic javascript object.

 

创建一个新的JavaScript对象,这时这个对象的prototype是Null,所以objectRef的prototype链只包含一个对象Object.prototype。

 

继续看代码:

 

/* 构建MyObject1这个类型的构造函数
MyObject1 - type.
*/
function MyObject1(formalParameter){
/* 为者对象创建一个属性名字叫testNumber */
this.testNumber = formalParameter;
}
/* 构建MyObject2这个类型的构造函数
MyObject2 - type:-
*/
function MyObject2(formalParameter){
/* 为者对象创建一个属性名字叫testString*/
this.testString = formalParameter;
}
/* 下一步的操作会用MyObject1对象替换掉MyObject2默认的prototype属性*/
MyObject2.prototype = new MyObject1( 8 );
/* 最后我们创建MyObject2类型的一个对象*/
var objectRef = new MyObject2( "String_Value" );

下面来解释这段代码:

  1. objectRef这个MyObject2类型的对象有一个prototype的链,链中的第一个对象是MyObject1对象。
  2. MyObject1对象也有prototype,这个prototype是Object默认的prototype。
  3. Object.prototype的prototype是null,至此这条prototype链结束。

因此当一个取值操作发生时,objectRef 的整个prototype链就开始工作

var val = objectRef.testString;

objectRef这个对象的有一个属性叫做testString,那么上面这句代码会把testString的值赋给val

 

var val = objectRef.testNumber;

在objectRef这个对象里并没有testNumber这个属性,但是val却的到了值8,而不是undefine,这是因为解释器在没有在当前对象找到要找

的属性后,就会去检查这个对象的prototype,objectRef的prototype是MyObject1对象,这个对象有testNumber这个属性,所以val得到8这个值。

 

var val = objectRef.toString;

现在val是个function的引用,这个function是Object.prototype的property,由于MyObject1和MyObject2都没有定义toString这个property

所以Object.prototype返回

 

var val = objectRef.madeUpProperty;

最后val是undefined,因为MyObject1和MyObject2,还有Object都没有定义madeUpProperty这个property,所以得到的是undefine.

 

读操作会读取在obj自己和prototype 链上发现的第一个同名属性值。

写操作会为obj对象本身创建一个同名属性(如果这个属性名不存在

这就意味着objectRef.testNumber = 3会在objectRef对象上创建一个property,名字是testNumber,当下一次在要读取testNumber时

propertype链就不会工作,仅仅会得到objectRef的property 3,而MyObject1的testNumber属性并不会被修改).

由下面的代码为证:

 

/* 构建MyObject1这个类型的构造函数
MyObject1 - type.
*/
function MyObject1(formalParameter){
/* 为者对象创建一个属性名字叫testNumber
*/
this.testNumber = formalParameter;
}

/* 构建MyObject2这个类型的构造函数
MyObject2 - type:-
*/
function MyObject2(formalParameter){
/* 为者对象创建一个属性名字叫testString*/
this.testString = formalParameter;
}

/* 下一步的操作会用MyObject1对象替换掉MyObject2默认的prototype属性*/
var obj1 = new MyObject1( 8 );
MyObject2.prototype = obj1;

/* 最后我们创建MyObject2类型的一个对象*/

var objectRef = new MyObject2( "String_Value" );

alert(objectRef.testNumber);
objectRef.testNumber = 5;
alert(objectRef.testNumber);
alert(obj1.testNumber);

 

 

时间: 2024-12-03 01:49:11

再谈JavaScript中对象的prototype链的相关文章

了解JavaScript中对象的prototype属性

一.什么是JavaScript中对象的prototype属性 JavaScript中对象的prototype属性,是用来返回对象类型原型的引用的.我们使用prototype属性提供对象的类的一组基本功能.并且对象的新实例会"继承"赋予该对象原型的操作.但是这个prototype到底是怎么实现和被管理的呢?对于对象的prototype属性的说明,JavaScript手册上如是说:所有 JavaScript内部对象都有只读的 prototype 属性.可以向其原型中动态添加功能(属性和方法

再谈Javascript中的基本类型和引用类型(推荐)_javascript技巧

一.基本类型和引用类型概述 js中数据类型的值包括:基本类型值和引用类型值 基本数据类型:undefined;null;boolean;number;string 引用类型值:保存在内存中,js不允许直接访问内存位置,因此时操作引用而不是实际对象 二.如何检测数据类型 1.基本数据类型的检测:使用typeof var s = "AAA"; alert(typeof s); //返回string 2.引用类型(对象类型)检测:使用instanceof alert(person insta

再谈Javascript中的异步以及如何异步_javascript技巧

为什么需要异步?why?来看一段代码. 问题1: for(var i=0;i<100000;i++){ } alert('hello world!!!'); 这段代码的意思是执行100...次后再执行alert,这样带来的问题是,严重堵塞了后面代码的执行,至于为什么,主要是因为JS是单线程的. 问题2: 我们通常要解决这样一个问题,如果我们需要在head里面加入script代码的话,一般会将代码写在window.onload里面(如果操作了dom的话),你有没有想过,为什么要加window.on

javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式_基础知识

在使用面向对象编程时,对象间的继承关系自然少不了!而原型正是实现javascript继承的很重要的一种方法! 我们首先来看以下代码: 复制代码 代码如下: function person(name, age) { this.name = name; this.age = age; } person.prototype.getInfo = function() { alert("My name is "+this.name+", and I have "+this.a

浅谈JavaScript中的对象及Promise对象的实现_javascript技巧

JavaScript 中的所有事物都是对象:字符串.数值.数组.函数.下面小编给大家收集整理些javascript中的对象及promise对象的实现.具体内容如下: 到处都是对象 window对象 常用的属性和方法介绍 location 包含页面的URL,如果改变这个属性,浏览器会访问新的URL status 包含将在浏览器状态去显示的一个串.一般在浏览器左下角 onload: 包含了需要在页面完全加载后调用的函数 document: 包含DOM alert方法: 显示一个提醒 prompt方法

javascript中对象的定义、使用以及对象和原型链操作小结_javascript技巧

本文实例总结了javascript中对象的定义.使用以及对象和原型链操作.分享给大家供大家参考,具体如下: 1. 除了5种基本类型外,JS中剩下的就是对象 (1)对象的定义: 直接定义: var test={x:1,y:1} new方式创建: var test=new Object({x:1}) Object.create方式: var test=Object.create({x:1}) (2)对象上的赋值与取值 举例: var test={ x:1, y:2 } 方法一:可以通过test['x

浅谈Javascript中的函数、this以及原型_javascript技巧

关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

浅谈javascript中call()、apply()、bind()的用法

  浅谈javascript中call().apply().bind()的用法         一直对Javascript中的apply/call/bind的用法很模糊,恰好看到了这篇文章.对三者之间的区别与联系算是有了比较清晰的认识.这里记录下来,分享给大家. call(thisObj,arg1,arg2...).apply(thisObj,[obj1,obj2...])这二个方法是每个函数都包含的非继承的方法 call(thisobj[, args])和apply(thisobj[, arg

浅谈JavaScript 浏览器对象_javascript技巧

window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽: