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#等语言类似 ...
随机推荐
- part1:3-VMware及redhat enterprise Linux 6 的安装
创建虚拟机PC FILE->NEW Virtual machine->custom(自定义,定制)->...->I WILL INSTALL THE OS LATER-> ...
- 2018.07.03 HDU Rikka with Phi(线段树)
Rikka with Phi Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) P ...
- hdu - 1072(dfs剪枝或bfs)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1072 思路:深搜每一个节点,并且进行剪枝,记录每一步上一次的s1,s2:如果之前走过的时间小于这一次, ...
- redhat 6用yum方式安装nginx
前提条件:如果发生了没有注册redhat账号造成没有权限使用yum的情况下,可以参考:http://www.cnblogs.com/boshen-hzb/p/6080431.html 1.cd /et ...
- Flex box 弹性盒子布局
display: -webkit-flex 标识使用弹性布局 flex: num 占容器的比例 Flex等比划分 导航1 : Flex :1; 导航2 Flex: 2; ————&g ...
- C#-VS字符串、日期、时间和时间段
小知识 哈希表,内存中的对象,用速度很快的哈希表当字典表,记录主键和内容. @,遇到转义字符,不转义,直接输出,即就是.转义字符是反斜杠/ 全部的内置类型都用类和结构描述.值类型用结构,引用类型用类. ...
- (二进制 异或)Team Formation --ZOJ --3870
链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3870 http://acm.hust.edu.cn/vjudge/ ...
- (并查集)小希的迷宫 --HDU -- 1272
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1272 http://acm.hust.edu.cn/vjudge/contest/view.action ...
- (线段树)Balanced Lineup --POJ --3264
链接: 对于POJ老是爆,我也是醉了, 链接等等再发吧! http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82832#problem/G 只 ...
- 在TFS中使用Git Tags(标签或标记),实现代码的版本管理
一.概述: 与TFVC中标记(Label)一样,Git的标签(Tag)也是TFS系统的代码管理中非常重要的一个版本管理工具.使用标签,我们可以每个时间点的代码注上一个通俗.并且容易记忆的名称(例如标签 ...