javascript中创建对象的几种不同方法
javascript中创建对象的几种不同方法
方法一:最直白的方式:字面量模式创建
<script>
var person={
name:"小明",
age:20,
sex:"男",
hobby:function(){
console.log("打篮球");
}
};
</script>
这种方法代码量多,用于“一开始就确定好内部数据类型的”对象创建。
方法二:调用系统构造函数创建
<script>
var per=new Object();
per={};
per.name="小明";
per.age="20";
per.hobby=function(){
console.log("打篮球");
};
</script>
这种方法可以先调用Object来创建一个空的对象,然后动态地在后面添加对象需要的属性,但是代码量也很多。当创建一个跟它相似的对象时可能会重复使用到添加属性的代码语句,不够简洁。
方法三:工厂模式创建
<script>
function createPerson(name,age){
var p=new Object();
p.name=name;
p.age=age;
p.hobby=function(){
console.log("打篮球");
};
}
var person1=createPerson("小明","20");
var person2=createPerson("小米","18");
</script>
这种方法可以解决方法二的问题,即要创建多个相似的对象时只需要调用多次函数就好,但是工厂模式创建对象无法识别对象的类型,它们都是Object()构造函数创建,都是Object类型(所有的对象都是Object的后代),不像其他方法Array()、Date()等.
方法四:自定义构造函数创建
构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写。另外就是调用方式的不同,普通函数是直接调用,而构造函数需要使用new关键字来调用。
<script>
function Person("name","age"){
this.name=name;
this.age=age;
this.hobby=function(){
console.log("打篮球");
};
}
var person1=new Person("小明","20");
var person2=new Person("小米","18");
</script>
这种方法与工厂模式创建有几个不同点:1.函数名Person是大写,而工厂模式的函数creatPerson是小写(习惯上这样用而已);2.该方法没有return语句,而工厂函数创建有return;3.该方法直接将属性和方法赋值给了this对象,而工厂模式没有出现this对象;4.该方法通过new操作符来实例化一个对象,而工厂模式实例化对象直接调用函数即可。
要创建Person的新实例,必须使用new操作符。用这种方式调用构造函数实际上会经历以下四个步骤:
1.创建一个新对象;2.将构造函数的作用域赋给新对象(因此this就指向了这个新对象);3.为这个新对象添加属性;4.返回新对象。
这种方法虽然好用,但也不是没有问题。例如当你需要创建100个Person,这100个对象都是单独的个体,它们之间的私有属性是不相等的,当创建100个这样的对象时,加入一个对象中有一个方法,那创建100个对象就要创建100个方法,但是这些方法都是一样的功能,就没有这个必要去浪费内存空间。所以开始就有了下面的方法五了。
方法五:原型模式创建对象
原型模式有一个强大的功能就是可以实现数据共享,从而节省空间,比如上面的100个对象有100个功能一样的方法,那我完全可以让这100个对象共用一个方法。
<script>
function Person(name,age)
{
this.name=name;
this.age=age;
}
Person.prototype.eat=function()
{
console.log("吃东西");
}
var p1=new Person("小米",30);
var p2=new Person("小明",20);
</script>
如上需要共享的数据就可以写在原型对象(prototype)中,不需要共享的数据写在构造函数Person中,
以后用new Person创建的每一个对象,都可以享用到prototype里面的属性和方法,而构造函数Person里的属性和方法则根据创建对象时传入的参数不同来决定。
<script>
2 function Student(name,age,sex){
3 this.name=name;
4 this.age=age;
5 this.sex=sex;
6 }
7 Student.prototype={
8 constructor:Student,
9 height:"180",
10 weight:"55kg",
11 study:function(){
12 console.log("学习好开心");
13 },
14 eat:function(){
15 console.log("好好吃");
16 }
17 };
18 var stu=new Student("张飞",20,"男");
19 stu.eat();//好好吃
20 stu.study();//学习好开心
21 </script>
关于构造函数、原型对象、实例对象的指向关系,表述如下:
构造函数可以实例化对象;
构造函数中有一个属性叫prototype,是构造函数的原型对象;
构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数;
实例对象的隐含属性(__proto__)指向的是该构造函数创造的原型对象;
以上资料,部分参考自《javaScript高级语言程序设计(第三版)》,如有错误,并无误导之意,请前辈不吝指出!感谢!
javascript中创建对象的几种不同方法的更多相关文章
- JavaScript中创建对象的三种方式!
JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...
- JavaScript中创建对象的三种模式
JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返回. 缺点:创建的对象无法识别类型(全是Object) 2.构造函数模式: ...
- JavaScript中创建对象的几种模式
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- javascript中创建对象的几种方式
1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的值. var person = new Object(); person.name=&q ...
- JavaScript中创建对象的5种模式
构造函数模式 实现方式: function Person(name, age, job) { this.name = name; this.age = age; this.job = job; thi ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- Java中创建对象的几种方式
Java中创建对象的五种方式: 作为java开发者,我们每天创建很多对象,但是我们通常使用依赖注入的方式管理系统,比如:Spring去创建对象,然而这里有很多创建对象的方法:使用New关键字.使用Cl ...
- javascript中创建对象的方式总结
javascript中创建对象的方式总结 具体代码如下: //创建对象的方式: //创建方式一 var person=new Object(); person.name='jack'; person. ...
- 实现JavaScript中继承的三种方式
在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承. 一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...
随机推荐
- 去掉字符串前后的空格和Tab
<script language=Javascript>function String.prototype.Trim() {return this.replace(/(^\s*)|(\s* ...
- 在delphi XE5 里面编译kbmmw4.3
Delphi XE5 仓促的发布了,虽然开始支持Android 开发了,但是经过试用,发现那个模拟器慢到无法用, 真机可以运行,但是调试也几乎无法用.由于XE5 的主要增加的是Android 的开发支 ...
- 2018.10.19 NOIP训练 yk赚钱记(01分数规划)
传送门 其实是一个裸的最优比率生成树. 注意精度的控制就行了. 代码
- 2018.10.02 NOIP模拟 矩阵分组(二分答案)
传送门 考场上并不会写二分的check函数,下来看了看题解发现真是妙极. 不难想到每次直接从四个角各按阶梯状拓展出合法区域A,再检验B是否合法就行了.(然而考场上写的弃疗了) 于是题解用了一些小技巧优 ...
- 2018.09.15 poj2117Electricity(割点)
传送门 其实求一个图删除一个点之后,联通块最多有多少. 直接tarjan求割点更新答案就行了. 但注意原图不一定连通. 代码: #include<iostream> #include< ...
- ics
5.网分用法 时延测试: Format ->Delay Scale Ref -> AUTO SCALE Marker Search -> TRACKING[ON OFF]这样以后把M ...
- Java中JNI的使用详解第一篇:HelloWorld
转自: http://blog.csdn.net/jiangwei0910410003/article/details/17465085 今天开始研究JNI技术,首先还是老套路,输出一个HelloWo ...
- genymotion无法连接相机问题
genymotion模拟器即时打开了相机的开关,也无法连接到相机.这是因为其他进程占用了相机,虚拟设备无法获得,可以尝试: 1.不关闭模拟器,重启adt的Eclipse 2.重启ADB,adb kil ...
- springmvc 开涛 数据验证
两种方式:编程和声明. 编程需要:验证器,控制器,servlet.xml,错误码设置 声明需要:加jar包,控制器,跟孔浩讲得类似 错误消息设置的两种方式:硬编码:从资源文件中读取(默认,自定义).
- Delphi XE5 图解为Android应用制作签名
http://redboy136.blog.163.com/blog/static/107188432201381872820132 Delphi XE5 图解为Android应用制作签名 2013- ...