举例说明JavaScript中的实例对象与原型对象

首先声明:javascript中每个对象都有一个constructor属性和一个prototype属性。constructor指向对象的构造函数,prototype指向使用构造函数创建的对象实例的原型对象。

function Person(){ 

 }
var person = new Person(); 

Person.prototype = {
 constructor : Person,
 name : 'zxs',
 age : 24,
 sayName : function(){alert(this.name)}
 } 

person.sayName();

在这段代码中会报错,sayName() is not defined。根据javascript高级程序设计第二版的解释,是因为重写的原型切断了构造函数与最初原型之间的联系。但是我们调整一下上面语句的顺序。如下:

function Person(){
 }
//var person = new Person();
Person.prototype = {
 constructor : Person,
 name : 'zxs',
 age : 24,
 sayName : function(){alert(this.name)}
}
/*===========================================================*/
var person = new Person();
/*===========================================================*/
 person.sayName(); // zxs
alert(person.constructor) //function Object() { [native code]} or function Person() {} 取决与蓝色的语句是否有效

注意上面两段代码等号中间的语句。按第二段的顺序写代码,将会输出 ”zxs“,这个结果说明在第一种情况下报错并不能说明是因为切断了构造函数与原想之间的联系引起的。

Person.prototype = {}

本来就是一种定义对象的方法,而且在javascript中每个对象的constructor属性都默认的指向Object构造函数,这也就不难说明重写原型对象确实切断了构造函数与最初原型之间的联系,但并不能说明这种联系被切断之后 person就不能访问到sayName()函数。

现在有这样的假设:函数的prototype属性所指向的原型对象,与我们显示新建的原型对象并不是完全等同的。当我们调用函数的时候会创建一个原型对象,此时会首先查找当前环境中是否存在其原型对象,如果程序中不存在,就创建一个,如果环境中存在,侧查找他们的属性和方法,最后根据查找的结果返回一个原型对象,这个对象中的属性和方法总是优先使用默认原型中的属性和方法,也就是构造函数中定义的属性和方法。当当调用的方法或属性不存在于默认的原型中时,才使用定义在Person.prototype = {} 的属性和方法。

javascript是解释性的语言,语句都是顺序执行的,在第一段代码中,当我们使用 new 关键字创建新对象的时候,Person.prototype = {} 并没有执行,也就是说在当前的执行环境中找不到其中定义的方法和属性,而构造函数中没有该方法,所以出错。就像一个变量,给他赋值的时候程序没有执行将不能使用。在第二段中环境中已经存在该调用的方法,构造函数的原型对象已经创建完毕,所以可以得到结果。

再看下面的一段程序:

////////////////////////////////////////////////////////////////////////// 

function Person(){} 

/*===========================================================*/ 

 var person = new Person();
Person.prototype.name = 'song'; 

/*===========================================================*/ 

//Person.prototype.sayName = function(){alert(this.name)};
Person.prototype = {
constructor : Person,
name : 'zxs',
age : 24,
sayName : function(){alert(this.name)}
}
person.sayName(); // error 

////////////////////////////////////////////////////////////////////////// 

function Person(){  }
/*var person = new Person();*/
Person.prototype.name = 'song';
/*Person.prototype.sayName = function(){alert(this.name)};*/
Person.prototype = {
constructor : Person,
  name : 'zxs',
  age : 24,
  sayName : function(){alert(this.name)}
} 

/*===========================================================*/
var person = new Person(); 

/*===========================================================*/
person.sayName(); // zxs

从这里可以看出使用 Person.prototype.name = '',的方式不论在什么地方创建对象都能被访问,如果同时存在对象字面量和这种方法定义原型对象,将使用后定义的作为最终值。并且对原型对象使用对象字面量定义之后,该定义必须出现在创建对象的语句之前才能被访问到。

实例不能访问到原型对象中的属性和方法,不仅仅是因为重写原型对象切断了构造函数与最初原型之间的联系。

function Person(){  

  }
var person = new Person();  

Person.prototype = {
  //constructor : Person,
  name : 'zxs',
  age : 24,
  sayName : function(){alert(this.name)}
  }  

person.sayName();

以上代码在实例化对象时构造函数的原型为空,它没有任何除默认属性以外的属性。重写构造函数的原型确实切断了构造函数与最初原型之间的联系。

在使用 new 操作符以后构造函数的原型对象中的属性和方法已经添加到 person对象中。因为以上方法为函数原型添加新属性和方法不具有动态性,所以person不能访问到新添加的属性和方法。

重写原型对象之后,就如同如下代码:

var o = {
  name : 'zxs'
  } 

var obj = o;
o = {}
console.log(o.name);

此时输出的值是undefined,因为,对象是一个引用类型,“=”是赋值操作符,并且其运算顺序是从右往左。o={}就是说o的指向已经改变,是一个空对象。
Person.prototype.mothed = function() {}与Person.prototype={mothed:function(){}}的区别就如同 arr = []和arr.push()一样,前者都是修改自身,后者是完全改变自身。

(0)

相关推荐

  • 图文详解JavaScript的原型对象及原型链

    对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张所谓很经典的图,上面画了各种线条,一会连接这个一会连接那个,说实话我自己看得就非常头晕,更谈不上完全理解了.所以我自己也想尝试一下,看看能不能把原型中的重要知识点拆分出来,用最简单的图表形式说清楚. 我们知道原型是一个对象,其他对象可以通过它实现属性继承.但是尼玛除了prototype,又有一个__

  • javascript构造函数以及原型对象的理解

    以下是一个构造函数的例子 如果是实例方法,不同的实例化,它们引用的地址是不一样的,是唯一的. //定义一个构造函数 function People(name,age){ this.name=name; this.age=age; this.dothings=function(){ retrun this.name+this.age; } } var people1 = new People("panda1",25); var people2 = new People("pan

  • JS原型对象的创建方法详解

    本文实例讲述了JS原型对象的创建方法.分享给大家供大家参考,具体如下: 使用js的prototype属性的时候,创建对象的方式是存在优先级的 1.如果方法中存在构造方法就先使用方法中的构造方法 2.如果方法中不存在构造方法则继续查找prototype原型的构造方法 <html> <head> <TITLE>class_obj_js_class</TITLE> <script language=javaScript> function a(name

  • 深入理解javascript构造函数和原型对象

    常用的几种对象创建模式 使用new关键字创建 最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀! var gf = new Object(); gf.name = "tangwei"; gf.bar = "c++"; gf.sayWhat = function() { console.log(this.name + "said:love you forever"); } 使用字面量创建 这样似乎妥妥的了,但是宅寂的

  • JS原型对象通俗"唱法"

    1.关于原型对象的重要知识点 首先要知道一个很重要的知识点,一句话:所有对象都有原型对象. 2. 对比其他语言的理解 原型对象,就是其它语言中的类中的静态属性和静态方法,总是是静态-static就对了.原理是: 内存中只有一份. 3. 在内存中的形象图: 首先,在产生js对象之前,我们需要创造一个构造函数(这都不知道,那就不要往下看了),如下: 复制代码 代码如下: function Person(name_, age_) { this.name = name_; this.age = age_

  • js 原型对象和原型链理解

    一个例子让你彻底明白原型对象和原型链 开篇 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述.有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你没有真正的理解.最近正在读<Javascript高级程序设计>,书中对原型对象和原型链的描述让我受益匪浅,下面仅用一个对比性的例子来说明. 我们经常会这么写 function Person () { this.name = 'John'; } var p

  • Javascript 学习笔记之 对象篇(二) : 原型对象

    Javascript 是唯一一个被广泛运用的原型式继承的语言,所以理解两种继承方式的差异是需要时间的. 第一个主要差异就是 Javascript 使用原型链来继承: function Foo() { this.value = 42; } Foo.prototype = { method: function() {} }; function Bar() {} 设置 Bar 的 prototype 为 Foo 的对象实例: Bar.prototype = new Foo(); Bar.prototy

  • 浅谈JS原型对象和原型链

    在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对象都是普通对象. 举例说明: function f1(){ //todo } var f2 = function(){ //todo }; var f3 = new Function('x','console.log(x)'); var o1 = {}; var o2 = new Object();

  • js使用原型对象(prototype)需要注意的地方

    我们先来一个简单的构造函数+原型对象的小程序 function CreateObj( uName, uAge ) { this.userName = uName; this.userAge = uAge; } CreateObj.prototype.showUserName = function () { return this.userName; } CreateObj.prototype.showUserAge = function () { return this.userAge; } 这

  • Javascript中获取对象的原型对象的方法小结

    在Javascript中,如果我们有一个对象但是又不知道它的构造函数时,如何获取它的原型对象呢? 在Chrome中或是FireFox浏览器中,我们可以直接使用对象的__proto__属性获取它的原型对象. 复制代码 代码如下: <!-- lang: js --> function F(){}; var foo = new F(); alert(foo.__proto__ == F.prototype); 但是,__proto__属性在IE浏览器中一直到IE11才被支持. 那么在不支持__pro

随机推荐