JavaScript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象
一、仔细分析前面的原型模式创建对象的方法,发现原型模式创建对象,也存在一些问题,如下:
1、它省略了为构造函数传递初始化参数这个环节,结果所有实例在默认的情况下都将取得相同的属性值,这还不是最大的问题!
2、最大的问题是原型中的所有属性是被很多实例所共享的,这种共享对于函数非常合适,对于那些包含基本值的属性也说得过去,因为我们知道可以在实例上添加一个同名属性,可以隐藏原型中的对应属性。但是对于包含应用类型值的属性来说,问题就非常严重了,代码如下:
function Person(){
}
Person.prototype={
constructor:Person,
name:"张三",
age:22,
job:"coder",
friends:["李四","王五"],
sayName:function(){
alert(this.name);
}
}
var person1=new Person();
var person2=new Person();
person1.friends.push("赵六");
alert(person1.friends); //输出:李四,王五,赵六
alert(person2.friends);//输出:李四,王五,赵六
分析上面的代码,当我们为person1添加一个朋友的时候,发现person2同时也被添加了一个朋友,但这并不是我们想要的,而这正是因为原型模式的共享的本性所导致的,只要任何一个实例修改了原型属性对象中的属性值,所有与该原型对象关联的实例都会受到影响!
二、组合使用构造函数模式和原型模式
为了解决原型模式不能初始化参数和共享对于引用模式所存在的问题!这里我们可以采用构造函数模式和原型模式的结合模式来创建自定义类型,构造函数用于与解决初始化参数(实例属性的定义),原型模式用于共享 方法和constructor。
这种构造函数与原型组合的模式创建自定义类型,是ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说,这是用来定义引用类型的一种默认模式。
代码如下:
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.friends=["小超","大超"];
}
Person.prototype={
constructor:Person,
sayName:function(){
alert(this.name);
}
}
var person1=new Person("张三",22,"coder");
var person2=new Person("李四",22,"coder");
person1.friends.push("Stephen Curry","Kevin Durant");
alert(person1.friends); //输出:小超,大超,Stephen Curry,Kevin Durant
alert(person2.friends);//输出:小超,大超
通过上面的输出我们发现组合使用构造函数模式和原型模式创建的自定义类型及解决了
1、构造函数:构造函数创建类型相同的函数,确是不同的作用域链和标识符解析(因为在JS中每创建一个函数就是一个对象,所以 (导致了构造函数中的方法) 在不同的实例中都需要重新创建一遍,但是这些方法做的确实同一件事情);
2、原型模式:其不能初始化参数,以及它的共享性对与一些引用类型所造成的影响(比如数组);
- DataTable排序结果的纠正
- web框架
- java:利用xpath删除xml中的空节点
- java array to list
- Python之Dijango的“坑” hostname, aliases, ipaddrs = gethostbyaddr(name) UnicodeDecodeError: 'utf-8' cod
- nGrinder 简易使用教程
- UI设计高效学习网站&工具,来自学长的收藏夹哦
- 安装git出现templates not found的问题
- 时间戳 时间
- jenkins 设置 gitlab web hooks
- 测试流程?项目管理流程?
- 学web前端开发写给新手的建议,超实用!
- 价值22万的5字母域名sanwa.com被启用
- Django admin 一些有用的设置
- 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 数组属性和方法