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


Posted in Javascript onMarch 11, 2016

首先声明: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 相关文章推荐
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 #Javascript
原生JavaScript制作微博发布面板效果
Mar 11 #Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 #Javascript
详解Angularjs中的依赖注入
Mar 11 #Javascript
详解AngularJS过滤器的使用
Mar 11 #Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 #Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 #Javascript
You might like
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
php获取某个目录大小的代码
2008/09/10 PHP
PHP教程 变量定义
2009/10/23 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python模糊图片过滤的方法
2018/12/14 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python构建指数平滑预测模型示例
2019/11/21 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
如何用Django处理gzip数据流
2021/01/29 Python
老师自我鉴定范文
2013/12/25 职场文书
大四本科生的自我评价
2013/12/30 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
爱晚亭导游词
2015/02/09 职场文书
2015年采购工作总结
2015/04/10 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
检举信的写法
2019/04/10 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
vue打包时去掉所有的console.log
2022/04/10 Vue.js
Java存储没有重复元素的数组
2022/04/29 Java/Android