举例说明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()一样,前者都是修改自身,后者是完全改变自身。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, 对象
, 实例
, 原型
, 实例对象
原型对象
javascript 原型对象、原型对象和实例对象、javascript实例化对象、javascript对象实例、javascript 原型链,以便于您获取更多的相关知识。

时间: 2024-09-21 23:08:41

举例说明JavaScript中的实例对象与原型对象_基础知识的相关文章

详解JavaScript中的客户端消息框架设计原理_基础知识

 哇--是个危险的题目,对吗?我们对于什么是本质的理解当然会随着我们对要解决问题的理解而变化.因此我不会说谎--一年前我所理解的本质很不幸并不完整,因为我确信我将要写的已经快伴随我有6个月之久.所以,这篇文章是我在发现JavaScript中成功的运用客户端消息模式的一些关键要点时的一个掠影. 1.) 理解中介者与观察者的区别  大多数人在描述任何事件/消息机制的时候喜欢套用"发布者/订阅者"(pub/sub)--但我认为这个术语不能很好的与抽象建立联系.当然,从根本上说,一些东西订阅了

JavaScript中的this关键字使用详解_基础知识

 和其它许多面向对象的语言一样,JavaScript 中也有 this 关键字,this 在函数中用来指向调用此方法的对象.实际编程中要判断 this 到底指向谁,一般可遵循以下原则:     如果该函数被 Function.call 或者 Function.apply 调用,那么 this 指向 call/apply 的第一个参数,如果参数是 null 或者 undefined,this 则指向全局对象(在浏览器中的话,全局对象就是 window 对象).     如果该函数被 Functio

javascript中的3种继承实现方法_基础知识

使用Object.create实现类式继承 下面是官网的一个例子 //Shape - superclass function Shape() { this.x = 0; this.y = 0; } Shape.prototype.move = function(x, y) { this.x += x; this.y += y; console.info("Shape moved."); }; // Rectangle - subclass function Rectangle() {

有关JavaScript中call()和apply() 的一些理解_基础知识

call()方法和apply()方法,在上层应用中用的不是很多,但在底层写JS框架的时候却常常看到.然后度娘谷哥一番,也发现好多达人写出了自己的理解和笔记,但始终还是云里雾里,于是去W3C学习了下 在W3C网上研究这两个方法的时候,看到一个词语,叫"对象冒充",这个概念本人觉得还是挺重要的,让我对这两个方法理解起来更加直观. call()方法,看下官方给出的例子 function sayColor(sPrefix,sSuffix) { alert(sPrefix + this.colo

javascript中window.event事件用法详解_基础知识

前两天写程序时因为要用到javascript中的window.event事件,于是就在网上搜了一下,终于找到一篇不错的文章,来与大家分享下: 描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子下面的例子检查鼠标是否在链接上单击,并且,如

JavaScript中的replace()方法使用详解_基础知识

 该方法找到一个正则表达式的字符串之间的匹配,并取代了匹配的子带的新的子串. 替换字符串可以包含以下特殊替换模式:  语法 string.replace(regexp/substr, newSubStr/function[, flags]); 下面是参数的详细信息:     regexp : 一个RegExp对象.匹配被替换参数的返回#2.     substr : 一个字符串,由newSubStr 来替换     newSubStr : 它取代从参数中收到的子字符串 #1.     funct

JavaScript中的Number数字类型学习笔记_基础知识

使用IEEE754格式来表示整数和浮点数值.浮点数值:该数值中必须包含一个小数点,并且小数点后面必须至少有一位数字.浮点数值需要内存空间是保存整数值的两倍.最高精度是17为小数,但在进行算术运算时其精度远远不如整数. 各种数值类型:十进制,八进制(在严格模式下无效),十六进制 八进制字面量的第一位必须是0,然后是八进制数字序列(0~7).如果字面值中的数值超出了范围,那么前导0将被忽略,后面的数值将被当做十进制数来解析 070//56 079//79 十六进制字面值的前两位必须是0x,后跟十六进

Javascript中的五种数据类型详解_基础知识

Undefined 未定义.只有一个值undefined Null         只有一个值,null Boolean 在javascript中,只要逻辑表达式不返回undefined不返回null,就都是真的. 复制代码 代码如下: if(3) true if(null) false if(undefined) false Number String javascript中不存在char类型. 字符串定义可以用单引号,也可以用双引号. 复制代码 代码如下: <html> <head&

JavaScript中各种引用类型的常用操作方法小结_基础知识

Object类型 Array类型重排序方法: compare升序: function compare(value1, value2){ if (value1<value2){ return -1; } if (value1>value2){ return 1; } else{ return 0; } } var values = [0,1,5,10,15]; values.sort(compare); console.log(values); // [0,1,5,10,15] 降序: func

JavaScript中的运算符种类及其规则介绍_基础知识

JavaScript中的运算符有很多,主要分为算术运算符,等同全同运算符,比较运算符,字符串运算符,逻辑运算符,赋值运算符等.这些运算符都有一些属于自己的运算规则,下面就为大家介绍一下JavaScript中的运算符. 一.JavaScript运算符的种类 1.算术运算符:+ . - .* . / . % . -(一元取反) . ++ . -- 2.等同全同运算符:== . ===. !== . !=== 3.比较运算符:< . > . <= . >= 4.字符串运算符:< .