JavaScript创建对象的方法汇总
JavaScript中的对象
ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有特性顺序的值。对象的每一个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样(以及其他将要讨论的原因),我们可以把ECMAScript的对象想象成散列表:无非就是一组名值对,其中值可以使数据或函数。
new创建对象的步骤
使用new操作符创建对象会经历的4个步骤
1.创建一个新对象;
2.将构造函数的作用域赋给新对象
3.执行构造函数中的代码
4.返回新对象
模式一
简单工厂模式:
function createPerson(name,age,job){
var o=new Object();
o.name=name;
o.age=age;
o.job=job;
o.sayName=function(){
alert(this.name);
};
return o;
}
优点:解决了创建多个相似对象,代码重复的问题;
缺点:没有解决对象识别的问题(即怎样知道一个对象的类型);
模式二
构造函数模式:
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
alert(this.name);
};
}
优点:可以把实例识别为一种具体的类型;
缺点:每个方法都要在每个实例上重新创建一遍;
模式三
原型模式:
function Person(){
}
Person.prototype.name="Nicholas";
Person.prototype.age=29;
person.prototype.job="Software Engineer";
Person.prototype.sayName=function(){
alert(this.name);
};
优点:可以让所有对象实例共享它所包含的属性和方法;
缺点:原型的共享本质,使所有实例共享相同属性值,对于引用类型的属性来说,改变一个实例的属性值会导致所有实例属性发生改变;
重点知识点:实例中的指针仅指向原型,与构造函数无关;
模式四
组合使用构造函数和原型模式(目前定义引用类型的一种默认模式):
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.fridends=["Shelby","Court"];
}
Person.prototype={
constructor:Person,
sayName:function(){
alert(this.name);
}
}
风格缺点:没有把所有信息封装在构造函数中,格式上没有封装性;
模式五
动态原型模式(保证了封装性):
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
if(typeof this.sayName!="function"){
Person.prototype.sayName=function(){
alert(this.name);
};
}
}
注意:使用动态原型模式时,不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型,那么就会切断现有实例与新原型之间的关系;
模式六
寄生构造函数模式:
function Person(name,age,job){
var o=new Object();
o.name=name;
o.age=age;
o.job=job;
o.sayName=function(){
alert(this.name);
};
return o;
}
知识点:构造函数在不返回值的情况下,默认会返回新对象实例。而通过在构造函数的末尾添加一个return语句,可以重写调用构造函数时的返回值。
用处:因为原则上不应改变原生对象的原型,因此可以用此方法为已存在的对象(Array,String等)添加特殊方法
缺点:和工厂模式没有本质区别,无法用instanceof操作符确定对象类型
模式七
工厂方法模式:
相比于简单工厂,工厂方法即提供了对象的类型,又很容易创建大量对象,即每增加一个对象只需要修改一处。举例:
var Factory=function(type,content){
if(this instanceof Factory){
var s=new this[type](content);
return s;
}else{
return new Factory(type,content);
}
}
Factory.prototype={
Java:function(content){
//......
},
JavaScript:function(content){
//......
}
}
JavaScript创建对象的方法汇总的更多相关文章
- javascript创建对象的方法--原型模式
javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...
- javascript创建对象的方法--基本模式
javascript创建对象的方法--基本模式 一.总结 关注本质 二.代码 <!DOCTYPE html> <html lang="zh-cn"> < ...
- javascript创建对象的方法--动态原型模式
javascript创建对象的方法--动态原型模式 一.总结 1.作用:解决组合模式的属性和函数分离问题 2.思路:基本思路和组合模式相同:共用的函数和属性用原型方式,非共用的的函数和属性用构造函数 ...
- javascript创建对象的方法--组合模式
javascript创建对象的方法--组合模式 一.总结 0.作用:解决原型模式对象独有属性创建麻烦的问题 1.组合模式使用普遍:jquery就是用的组合模式,组合模式使用非常普遍 2.组合模式优点: ...
- javascript创建对象的方法--构造函数模式
javascript创建对象的方法--构造函数模式 一.总结 构造函数模式作用和不足 1.作用:解决工厂模式不是用new关键字来创建对象的弊端 2.作用:解决工厂模式创建的实例和模型没有内在联系的问题 ...
- javascript创建对象的方法--工厂模式(非常好理解)
javascript创建对象的方法--工厂模式(非常好理解) 一.简介 创建对象的方法 本质上都是把"属性"和"方法",封装成一个对象 创建对象的基本模式 普通 ...
- JavaScript Array 数组方法汇总
JavaScript Array 数组方法汇总 1. arr.push() 从后面添加元素,返回值为添加完后的数组的长度 var arr = [1,2,3,4,5] console.log(arr.p ...
- web前端教程之javascript创建对象的方法
今天给大家讲讲javascript基础教程中的javascript面向对象的技术,这一次我们深入的学习一下JavaScrip基于t面向对象之创建对象,关于面向对象的一些术语这里就不给大家介绍了,不了解 ...
- javascript创建对象的方法总结
Javascript创建对象 最简单的方法:创建object实例. var person=new Object(); person.name="Joey";person.age=2 ...
随机推荐
- spoj COT2(树上莫队)
模板.树上莫队的分块就是按dfn分,然后区间之间转移时注意一下就好.有个图方便理解http://blog.csdn.net/thy_asdf/article/details/47377709: #in ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- java基础-day32
第09天 JDBC连接池&DBUtils工具类 今日内容介绍 u c3p0连接池 u dbcp连接池 u DBUtils工具类 第1章 c3p0连接池 1.1 连接池概述 实际开发中“获 ...
- Windows 8.1常见问题
Windows 8.1常见问题 1. 我想升级Windows 8.1,但是担心软件.硬件不兼容怎么办? 对于已安装的软件及联机的设备,可以在微软网站上下载Windows 8.1升级助手进行检测,会在检 ...
- js加减运算·传参
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- Android学习之可滑动当前的Activity视图看见上一个活动的视图
先看一下我的效果图吧: 好大的图啊!!! 百度音乐由一个很酷的功能,当前的UI可以滑动,然后看见上一个活动的UI,当时顿时觉得百度的牛人好多啊,能将如此前沿的技术应用到app上.当然如果你熟悉了And ...
- Docker实践(二):容器的管理(创建、查看、启动、终止、删除)
docker官方文档地址如下:[https://docs.docker.com/engine/reference/](https://docs.docker.com/engine/reference/ ...
- CentOS 7配置nginx-1.13.10支持http/2和Server Push
0.确保openssl版本大于1.0.2 openssl version 1.下载nginx-1.13.10 wget http://nginx.org/download/nginx-1.13.10. ...
- JS学习笔记6_事件
1.事件冒泡 由内而外的事件传播(从屏幕里飞出来一支箭的感觉) 2.事件捕获 由表及里的事件传播(力透纸背的感觉) 3.DOM事件流(DOM2级) 事件捕获阶段 -> 处于目标阶段 -> ...
- Button去除边框方法
<Button Content="Button" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey} ...