JavaScript之面向对象学习三原型语法升级

1、到目前为止,我们是时候分析下前面的使用原型语法来定义对象有哪些不足的地方，代码如下：

    function Person(){}Person.prototype.name="张三";Person.prototype.age=22;Person.prototype.job="coder";Person.prototype.sayName=function(){alert(this.name);}

当我们为Person对象每添加一个属性和方法,就要敲一遍Person.prototype,而且Person.prototype没有体现出封装性；

所以下面来改进原型语法，代码如下:

    function Person(){}Person.prototype={name:"张三",age:22,job:"coder",sayName:function(){alert(this.name);}}

改进之后的原型语法将Person.prototype设置为等于一个以对象字面量形式创建的新对象。最终的结果相同,但有一个列外:constrcutor属性不再指向Person了。

因为当我们每创建一个函数,同时就会创建一个prototype属性对象(原型属性对象)，而这个对象会自动获得constructor属性。

而我们在这里使用的语法，本质上完全重写了默认的prototype属性对象，因此constructor属性也就变成了新对象的constuctor属性(该属性指向Object构造函数),不在指向Person函数，所以尽管instanceof操作符还能返回正确的结果,但通过constructor属性来确定对象的类型已经不可能了，如下代码可以说明:

    function Person(){}Person.prototype={name:"张三",age:22,job:"coder",sayName:function(){alert(this.name);}}var person=new Person();alert(person instanceof Object); //输出:true  因为person是Object的实例(Object是所有类的基类)alert(person instanceof Person); //输出:true  因为person是Person的实例alert(person.constructor==Object);alert(person.constructor==Person); //输出false  说明Person构造函数的Person.prototype属性对象(原型对象)内的constructor属性已经不指向Person函数，而                                       //是指向Object函数

如果constructor属性真的很重要,我们可以向下面代码那样将它设回适当的值,代码如下:

    function Person(){}Person.prototype={constructor:Person, //自定义添加constructor属性,并让他指向Person函数name:"张三",age:22,job:"coder",sayName:function(){alert(this.name);}}var person=new Person();alert(person instanceof Object); //输出:true  因为person是Object的实例(Object是所有类的基类)alert(person instanceof Person); //输出:true  因为person是Person的实例alert(person.constructor==Object); //输出:false;  原因如下alert(person.constructor==Person); //输出：true  constructor:Person,=》在对象里面自定义了constructor属性,并让它指向了Person函数// 所以person.constructor重新指向了Person，而不是Object

注意:以上这种方式添加constructor属性会导致它的[[Enumerable]]设为true，而原生的constructor属性是不可枚举的,所以我们需要用ECMAScript 5中定义的Object.definePropery()方法来重新定义constructor属性,使他变成不可枚举的属性,且值是指向对象构造函数的指针，代码如下:

   function Person(){}Person.prototype={name:"张三",age:22,job:"coder",sayName:function(){alert(this.name);}}Object.defineProperty(Person.prototype,"constructor",{enumerable:false,value:Person});

转载于:https://www.cnblogs.com/GreenLeaves/p/5846402.html

JavaScript之面向对象学习三原型语法升级相关推荐

JavaScript之面向对象学习四原型对象的动态性
1.由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例上反映出来---即便是先创建了实例后修改原型也是如此.代码如下: function Person(){ } va ...
JavaScript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象...
一.仔细分析前面的原型模式创建对象的方法,发现原型模式创建对象,也存在一些问题,如下: 1.它省略了为构造函数传递初始化参数这个环节,结果所有实例在默认的情况下都将取得相同的属性值,这还不是最大的问题 ...
javascript 的面向对象特性参考
最近在看用javascript+css实现rich client.javascript 也是一个蛮有意思的语言.特别是其面向对象的实现和其他"标准"的OO launguage有很大 ...
JavaScript 权威指南-学习笔记（一）
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! JavaScript 权威指南-学习笔记 ...
javascript的ES6学习总结(第三部分)
1.ES6中的面向对象的类 1.1.定义类在ES5中,我们写一个类,通常是这么写的 function Person(name,age){this.name = name;this.age = age ...
了解使用JavaScript进行面向对象编程的基础（并增强您的编码…
by Kris Baillargeon 通过克里斯·拜伦学习使用JavaScript进行面向对象编程的基础知识(并增强您的编码能力!) (Learn the basics of object-ori ...
JavaScript 使用面向对象的技术创建高级 Web 应用程序
最近,我面试了一个有五年 Web 应用程序开发经验的软件开发人员.四年半来她一直在从事 JavaScript 相关的工作,她自认为 JavaScript 技能非常好,但在不久之后我就发现实际上她对 J ...
JavaScript的基础学习(一)
文章目录 JavaScript 的基础学习(一) 1 JavaScript 概述 1.1 JavaScript 的历史 1.2 ECMAScript 1.3 JavaScript的引入方式 2 Jav ...
JavaScript是面向对象还是基于对象
与其他语言相比,JavaScript中的对象总是显得不是那么合群. 我们在学习JavaScript面向对象时,往往也会有疑惑: 为什么JavaScript知道ES6才有对象的概念,但是却没有像其他语言 ...

JavaScript之面向对象学习三原型语法升级

JavaScript之面向对象学习三原型语法升级相关推荐

最新文章

热门文章