JavaScript之面向对象学习三原型语法升级
时间:2022-04-24
本文章向大家介绍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
});
- 【Go 语言社区】 golang 算法课程 第一季 第2节 洗牌算法
- 一条update语句的优化探索(r9笔记第80天)
- OpenCV角点检测源代码分析(Harris和ShiTomasi角点)
- Java基础-day03-代码题
- mongodb11天之屠龙宝刀(九)js函数入门:MongoDB基于js的数据类型修改
- Go语言社区 APP --问答模块数据存储流程及代码
- Java基础-day09-重构随机点名器
- OpenCV3.4两种立体匹配算法效果对比
- 文件操作常用函数
- Java基础-day09-对象;类;封装 学生管理系统
- two Pass方法连通域检测
- 【Java入门提高篇】Day14 Java中的泛型初探
- 使用shell脚本快速得到主备关系(r9笔记第93天)
- 【Java入门提高篇】Day13 Java中的反射机制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法