js几种创建对象的方式
javascript是一种“基于prototype的面向对象语言“,与java有非常大的区别,无法通过类来创建对象。那么,既然是面象对象的,如何来创建对象呢?
一、通过”字面量“方式创建。
方法:将成员信息写到{}中,并赋值给一个变量,此时这个变量就是一个对象。
例如:
var person = (name:'dongjc', work:function() {console.log('write coding')});
如果{}中为空,则将创建一个空对象:
var person = {} //创建空对象
演示代码:
<script type="text/javascript">
var person = {
name: "dongjc",
age: 32,
Introduce: function () { alert("My name is " + this.name + ".I'm " + this.age); }
};
person.Introduce();
</script>
我们还可以给对象丰富成员信息。 对象.成员名称 = 值; 对象[成员名称] = 值; 也可以获取对象的成员信息。 对象.成员名称; 对象[成员名称];
<script type="text/javascript">
var person = {
name: "dongjc",
age: 32,
Introduce: function () { alert("My name is " + this.name + ".I'm " + this.age); }
};
person.worker = 'coding'; //丰富成员信息
</script>
二、使用工厂模式创建对象
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;
}
var person1 = createPerson('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');
在使用工厂模式创建对象的时候,我们都可以注意到,在createPerson函数中,返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第三种创建对象的模式。
三、通过”构造函数“方式创建。
方法:
var obj = new 函数名();
这与通过类创建对象有本质的区别。通过该方法创建对象时,会自动执行该函数。这点类似于php通过创建对像时,会自动调用构造函数,因此该方法称为通过"构造函数“方式创建对象。
<script type="text/javascript">
function Person() {
this.name = "dongjc"; //通过this关键字设置默认成员
var worker = 'coding'; //没有this关键字,对象创建后,该变量为非成员
this.age = 32;
this.Introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
alert("My name is " + this.name + ".I'm " + this.age);
};
var person = new Person();
person.Introduce();
</script>
此代码一共会两次跳出对话框,原因在于创建对象是自动执行了该函数。
注意:this关键字的使用。这里的this与php中话法意思类似,指调用该函数的对象,这里指的是person。
对比工厂模式,我们可以发现以下区别:
1.没有显示地创建对象
2.直接将属性和方法赋给了this对象
3.没有return语句
4.终于可以识别的对象的类型。对于检测对象类型,我们应该使用instanceof操作符,我们来进行自主检测:
|
1
2
3
4
|
alert(person1 instanceof Object);//turealert(person1 instanceof Person);//turealert(person2 instanceof Object);//turealert(person2 instanceof Object);//ture |
同时我们也应该明白,按照惯例,构造函数始终要应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。
那么构造函数确实挺好用的,但是它也有它的缺点:
就是每个方法都要在每个实例上重新创建一遍,方法指的就是我们在对象里面定义的函数。如果方法的数量很多,就会占用很多不必要的内存。于是出现了第五种创建对象的方法
四、通过object方式创建。
方法:先通过object构造器new一个对象,再往里丰富成员信息。
var obj = new Object();
实例代码:
<script type="text/javascript">
var person = new Object();
person.name = "dongjc";
person.age = 32;
person.Introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
person.Introduce();
</script>
五、使用工厂模式创建对象
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;
}
var person1 = createPerson('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');
在使用工厂模式创建对象的时候,我们都可以注意到,在createPerson函数中,返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第五种创建对象的模式。
第六种:原型创建对象模式
function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName();
使用原型创建对象的方式,可以让所有对象实例共享它所包含的属性和方法。
如果是使用原型创建对象模式,请看下面代码:
function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name); //'Greg' --来自实例
alert(person2.name); //'Nike' --来自原型
当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。
这时候我们就可以使用构造函数模式与原型模式结合的方式,构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性
第七种:组合使用构造函数模式和原型模式
function Person(name,age,job){
this.name =name;
this.age = age;
this.job = job;
}
Person.prototype = {
constructor:Person,
sayName: function(){
alert(this.name);
};
}
var person1 = new Person('Nike',20,'teacher');
js几种创建对象的方式的更多相关文章
- JS高级---三种创建对象的方式
JS高级---三种创建对象的方式 字面量的方式 (实例对象) 调用系统的构造函数 自定义构造函数方式 //创建对象---->实例化一个对象,的同时对属性进行初始化 var per=new Per ...
- Javascript学习笔记:9种创建对象的方式
最基本的对象创建方式是通过Object构造函数或对象字面量的方式创建: ①通过Object构造函数的方式创建对象: var person=new Object();//或者写成var person={ ...
- JS几种数组遍历方式以及性能分析对比
前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...
- JS几种变量交换方式以及性能分析对比
前言 "两个变量之间的值得交换",这是一个经典的话题,现在也有了很多的成熟解决方案,本文主要是列举几种常用的方案,进行大量计算并分析对比. 起由 最近做某个项目时,其中有一个需求是 ...
- C#中几种创建对象的方式的对比
最近学习了msil,发现了很多好玩的,今天介绍一个用IL来创建对象的方式 1.最常见的两种创建对象方式 public static T Create<T>() where T : new( ...
- js两种创建对象方式
js创建方法的两种方式 <%@ page language="java" contentType="text/html; charset=ISO-8859-1&qu ...
- javascript三种创建对象的方式
javascript是一种“基于prototype的面向对象语言“,与java有非常大的区别,无法通过类来创建对象.那么,既然是面象对象的,如何来创建对象呢? 一.通过”字面量“方式创建. 方法:将成 ...
- JS几种数组遍历方式总结
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代 ...
- 「JavaScript」JS四种跨域方式详解
原文地址https://segmentfault.com/a/1190000003642057 超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript ...
随机推荐
- C++11并发——多线程std::thread (一)
https://www.cnblogs.com/haippy/p/3284540.html 与 C++11 多线程相关的头文件 C++11 新标准中引入了四个头文件来支持多线程编程,他们分别是< ...
- 爬虫acm比赛成绩(多页成绩整合在一起、获取复制不了的数据)(hihocoder、计蒜客)
https://github.com/congmingyige/web-crawler_rank-of-competition-in-JiSuanKe-and-hihocoder 1. 计蒜客(获取复 ...
- (大数 小数点) 大明A+B hdu1753
大明A+B Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- teleport使用说明
teleport使用说明 浏览器下载网页:只能浏览主页和少数网页,其它不能浏览,容量几百kb teleport下载项目一能完全离线看网页,7328多文件 9个JPG文件,大小134M te ...
- 搭建nginx反向代理用做内网域名转发
先上一个我的正常使用的配置 location / { proxy_pass http://192.168.1.84:80; proxy_redirect off; proxy_set_header H ...
- Python基础【day03】:入门知识拾遗(八)
本节内容 1.作用域 2.三元运算 3.进制 一.作用域 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. 1 2 3 if 1==1: name = 'wupeiq ...
- (零)SQL server安装配置
( 这里附加一个破解码: YFC4R-BRRWB-TVP9Y-6WJQ9-MCJQ7 ) (不选择) (默认实例,还有不建议安装在根目录下,可以安装到D盘之类的) (添加当前用户) (都选择仅安装) ...
- WorkerMan 入门学习之(三)基础教程-Timer类的使用
1.ServerTimer.php 代码: <?php /** * 定时器学习 */ require_once __DIR__ . '/Workerman/Autoloader.php'; us ...
- Composer 安装和使用
1.linux下安装 curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bin/composer ...
- 集大软件工程15级个人作业Week1
集大软件工程15级个人作业Week1 孙志威 201521123077 博客园主页 码云地址 阅读参考材料,并回答下面几个问题 (1)回想一下你初入大学时对网络工程专业的畅想 当初你是如何做出选择网络 ...