博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript之面向对象学习三原型语法升级
阅读量:6581 次
发布时间:2019-06-24

本文共 2490 字,大约阅读时间需要 8 分钟。

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    });

 

转载地址:http://zuino.baihongyu.com/

你可能感兴趣的文章
python实现进度条
查看>>
R语言中编写最小工作示例
查看>>
MySQL之事件学习整理
查看>>
mongodb开启安全认证后无法启动
查看>>
Android 一个应用启动另一个应用的说明
查看>>
阿里云CentOS7服务器利用LVM分区挂载磁盘全记录
查看>>
docker 常用命令
查看>>
计蒜客一维坐标的移动
查看>>
最全面的常用正则表达式大全
查看>>
MVVM 介绍
查看>>
Visual SVN的安装
查看>>
jQuery扩展写法
查看>>
网站开发的性能优化
查看>>
AIX日常维护
查看>>
CISCO 命令
查看>>
【JAVA笔记——道】Hadoop设计模式--抽象类
查看>>
php 有意思的小题
查看>>
Excel02-快速无误输入多个零
查看>>
【linux】一些命令及编码设置
查看>>
空类生成对象输出的结果是什么? toString()输出 覆写Object toString()方法输出的结果是什么...
查看>>