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#等语言类似 ...
随机推荐
- linux下第一个C程序
首先,用vi编辑器新建一个文件 $vi hi.c 输入以下的程序(怎么用vi不说了) #include <stdio.h> int main() { printf("hello. ...
- 通过程序修改注册表键值来达到修改IE配置参数的目的
通过程序修改注册表键值来达到修改IE配置参数的目的 使用IE访问应用程序或网页时经常需要设置一些选项(工具-Internet 选项),比如为了避免缓存网页,把工具-Internet选项-常规选项卡-I ...
- iOS与PHP/Android AES128 ECB NoPadding加密
前言 谈谈AES加密,网上有很多的版本,当我没有真正在加密安全问题前,总以为百度出来某个AES加密算法就可以直接使用,实际上当我真正要做加密时,遇到了很多的坑,原来不是拿过来就能用的.写下本篇文章,记 ...
- 20145226夏艺华 《Java程序设计》第8周学习总结
教材学习内容总结 学习目标 了解NIO 会使用Channel.Buffer与NIO2 会使用日志API.国际化 会使用正则表达式 了解JDK8增强功能 第14章 NIO与NIO2 14.1 认识NIO ...
- 2018.08.31 bzoj3566: [SHOI2014]概率充电器(概率dp+容斥原理)
传送门 概率dp好题啊. 用f[i]" role="presentation" style="position: relative;">f[i] ...
- Linux服务器部署系列之四—DHCP篇
DHCP服务器的配置是Linux服务器配置中最简单的服务之一,网上也有很多相关文档,不过大部分都只是讲解了配置.虽然我这篇文档也不一定很完善,不过我还是希望能够尽量说得明白一些,同时也希望大家能够提供 ...
- HDU 1242 Rescue (BFS+优先队列)
题意:X代表卫兵,a代表终点,r代表起始点,.代表路,#代表墙,走过.要花费一秒,走过x要花费2秒,求从起点到终点的最少时间. 析:一看到样例就知道是BFS了吧,很明显是最短路径问题,不过又加了一个条 ...
- yersinia的DHCP池耗尽断网攻击
http://jingyan.baidu.com/article/0eb457e5045bd703f1a9051d.html yersinia -G
- nginx 配置图片服务器 (window版本)
配置nginx二级域名 ①找到配置文件 例如:%nginx_home%/conf/nginx.conf ②配置 #user nobody; worker_processes 1; #error_log ...
- Flex box 弹性盒子布局
display: -webkit-flex 标识使用弹性布局 flex: num 占容器的比例 Flex等比划分 导航1 : Flex :1; 导航2 Flex: 2; ————&g ...