[JavaScript]对象创建方法
1、使用Object或对象字面量创建对象
(1)使用Object创建对象
var cat= new Object();
cat.name = "Tom";
cat.color= "blue";
(2)对象字面量创建对象
var cat = {
name : "Tom",
color : "blue"
};
局限性:当需要创建n个同类重复对象时,需要重复代码n次。
2、工厂模式创建对象
通过普通函数将对象的创建过程封装起来,给出特定的接口来初始化对象。
function genCat (name,color){
var obj = new Object();
obj.name=name;
obj.color=color;
return obj;
};
var cat1 = genCat("Tom","blue");
function genDog (name,color){
var obj = new Object();
obj.name=name;
obj.color=color;
return obj;
};
var dog1 = genDog("Snoopy","white");
局限性:对于这种工厂方法创建出来的对象,我们无法得知对象具体属于哪一类。如上述代码中的cat1和dog1,如果使用instanceof去检测,会发现cat1和dog1都属于Object类型。而我们的初衷是希望cat1属于Cat类,dog1属于Dog类。
3、构造函数模式创建对象
function Cat (name,color){
this.name=name;
this.color=color;
this.yell=function(){
return this.name + 'mew!';
}
};
var cat1 = new Cat("Tom","blue");
function Dog (name,color){
this.name=name;
this.color=color;
this.yell=function(){
return this.name + 'bark!';
}
};
var dog1 = genDog("Snoopy","white");
alert(cat1 instanceof Cat); //true
alert(dog1 instanceof Cat); //false
alert(cat1 instanceof Dog); //false
alert(dog1 instanceof Dog); //true
通过构造函数创建出的对象如上述代码可知,解决了对象类型归属的问题,能够明确检测对象属于哪一具体类型。
局限性:通过构造函数创建对象时,当一个构造函数被实例化n次时,构造函数中的函数也被实例化了n次,如上述代码中的this.yell(),同一类型的不同对象之间并不共用同一函数,造成了内存的浪费。
4、原型模式创建对象
我们创建的每一个函数都有一个prototype属性,该属性是一个指针,该指针指向了一个对象。对于我们创建的构造函数,该对象中包含可以由所有实例共享的属性和方法。
在默认情况下,所有原型对象会自动包含一个constructor属性,该属性也是一个指针,指向prototype所在的函数。
在调用构造函数创建新的实例时,该实例的内部会自动包含一个[[Prototype]]指针属性,该指针指便指向构造函数的原型对象。

通过在构造函数原型对象中添加属性和方法就可以实现在对象间数据的共享了。
function Cat(){
};
Cat.prototype.name="Tom";
Cat.prototype.color="blue";
Cat.prototype.yell=function(){
return this.name + "mew!";
};
var cat1= new Cat();
var cat2= new Cat();
alert(cat1.yell() == cat2.yell()); //true 两者共享同一函数
局限性:原型对象实现了对象间属性的共享,但在通常情况下我们希望不同的实例拥有自己单独的属性。所以一般情况下,我们使用构造函数模型和原型模型结合使用创建对象,就可以兼得方法的共享和属性的不共享。
//每只猫有自己的名字和颜色
function Cat(name,color){
this.name = name;
this.color = color;
}; //所有的猫都共享一个yell()方法
Cat.prototype.yell=function(){
return this.name + "mew!";
}; var cat1= new Cat("Tom","blue");
var cat2= new Cat("Garfield","yellow"); alert(cat1.yell()); //Tom mew! 实例属性
alert(cat2.yell()); //Garfield mew! 实例属性 alert(cat1.yell() == cat2.yell()); //true 两者共享同一函数
[JavaScript]对象创建方法的更多相关文章
- Javascript对象的方法赋值
Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method).今天在写代码过程中,又犯了一个低级错误. <!DOCTYPE html> < ...
- 3种创建、调用JavaScript对象的方法
hey you guys,两个月没有写技术博客了.作为一名有理想.有抱负的程序员,两个月不写技术博客,真该打.业精于勤,荒于嬉.行成于思,毁于随.勤奋是必不可少的,今后养成一周至少一篇博客的习惯.好了 ...
- js中对象和对象创建方法
这一次我们来说一说在JavaScript中经常会用到的一个复杂基本类型,对象,先从对象的属性讲起,再讲对象的创建方法,基本涵盖了创建对象的各种方法,大家一起学习呀~ 一.对象 要掌握对象的使用及继承, ...
- 【JavaScript学习】JavaScript对象创建
1.最简单的方法,创建一个对象,然后添加属性 var person = new Object(); person.age = 23; person.name = "David"; ...
- 深入JavaScript对象创建的细节
最近深入学习javascript后,有个体会:面向对象的方式编程才是高效灵活的编程,也是现在唯一可以让代码更加健壮的编程方式.如果我们抛开那些玄乎的抽象出类等等思想,我自己对面向对象的从写程序的角度理 ...
- JavaScript 对象创建
tips: JavaScript 除了null和undefined之外,其他变量都可以当做对象使用. JavaScript 的基本数据类型有:number boolean string null u ...
- JavaScript对象创建的几种方式
1 工厂模式 1.1 创建 function createFruit(name,colors) { var o = new Object(); o.name = name; o.colors = co ...
- javascript对象与方法
对象与方法 一.数组(Array) 1.使用new关键字创建数组 var box = new Array(); //创建了一个数 ...
- Javascript 对象创建多种方式 原型链
一.对象创建 1.new Object 方式 直接赋上属性和方法 var obj = new Object(); obj.name = '娃娃'; obj.showName = function(){ ...
随机推荐
- PC京东登录页分析 curl
w 正确的组合,没有显示新页面的数据. <!doctype html> <html> <head> </head> <?php include(' ...
- 常用的SQLalchemy 字段类型
https://blog.csdn.net/weixin_41896508/article/details/80772238 常用的SQLAlchemy字段类型 类型名 python中类型 说明 In ...
- 解决chrome在ubuntu+root模式下打不开的问题
chrome在ubuntu root模式下打不开 双击图标,chrome打不开了: 解决办法: 查看一下打开chrome浏览器的命令是什么,右键properties 发现是chromium-brows ...
- corethink功能模块探索开发(十八)前台页面插入jit前端数据可视化库
效果图: 1.静态文件放入View目录中 在View目录下新建Public目录,在Public目录下新建js.css目录. 把jit的资源放入对应目录中 2.在html中引入jit Applicati ...
- [设计模式]State模式
<Java与模式> 又称状态对象模式.状态模式是对象的行为模式.GOF95 一个对象的行为取决于一个或者多个动态变化的属性,这样的属性叫做状态.这样的对象叫做有状态的对象(stateful ...
- PHP引用符&的用法详细解析
本文转自:http://blog.csdn.net/vip_linux/article/details/10206091PHP中引用符&的用法.关于php的引用(就是在变量或者函数.对象等前面 ...
- c++ 模板 不能 分离编译
C++Template头文件和定义分开编译的问题 (1) // Foo.htemplate<typename T>class Foo{public:void f();}; // Foo.c ...
- ES6的十个新特性
这里只讲 ES6比较突出的特性,因为只能挑出十个,所以其他特性请参考官方文档: /** * Created by zhangsong on 16/5/20. */// ***********Nu ...
- 初学hadoop的个人历程
在学习hadoop之前,我就明确了要致力于大数据行业,成为优秀的大数据研发工程师的目标,有了大目标之后要分几步走,然后每一步不断细分,采用大事化小的方法去学习hadoop.下面开始叙述我是如何初 ...
- html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用
<!-- a: a{ /*清除a标签的下划线*/ text-decoration: none; } (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...