举例说明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 相关文章推荐
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
手把手带你封装一个vue component第三方库
Feb 14 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
js实现弹幕墙效果
Dec 10 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
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
python append、extend与insert的区别
2016/10/13 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python登录注册验证功能实现
2018/06/18 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
应聘自荐信
2013/12/14 职场文书
给国外客户的邀请函
2014/01/30 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
中班教师个人总结
2015/02/05 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
党课主持词大全
2015/06/30 职场文书
教师听课学习心得体会
2016/01/15 职场文书
Redis 常见使用场景
2021/08/30 Redis