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 ...
随机推荐
- 串口、COM口、TTL、RS-232、RS-485区别详解
1.串口.COM口是指的物理接口形式(硬件).而TTL.RS-232.RS-485是指的电平标准(电信号). 2.接设备的时候,一般只接GND RX TX.不会接Vcc或者+3.3v的电源线,避 ...
- 原生ajax写法
ajax1.0,ie9及以下,ie10+支持ajax2.0 ajax2.0比ajax1.0: 1.多了FormData对象,xhr.send(formData) //不能用GET 2.文件上传,文件 ...
- 利用Screen重启DevStack服务
上篇介绍了DevStack如何安装部署.集成化工具有好处,但在系统重启后,OpenStack的各个服务并不会随系统重启而启动,需要利用screen来重启,接下来就记录下如何使用screen. 准备工作 ...
- springSecurity初步认识和执行流程
springSecurity是spring官方给我们提供的一个非常强大的一个安全框架.也是现在最受欢迎的安全框架,比shiro更强大 springSecurity主要工作原理是内置了许多过滤器,组成过 ...
- epoll讲解--转自知乎
Ctrip AIO底层使用epoll https://blog.csdn.net/z69183787/article/details/52943637 首先我们来定义流的概念,一个流可以是文件,soc ...
- HDU - 4324 Triangle LOVE(拓扑排序)
https://vjudge.net/problem/HDU-4324 题意 每组数据一个n表示n个人,接下n*n的矩阵表示这些人之间的关系,输入一定满足若A不喜欢B则B一定喜欢A,且不会出现A和B相 ...
- Ubuntu(16.04.2)学习笔记(一)如何解决dpkg: error processing install-info
一.服务器安装软件是出现以下的错误信息: www@TinywanAliYun:~$ sudo apt-get install letsencrypt Reading package lists... ...
- ATS 自定义日志格式
字段解释 %<chi> 客户端IP %<caun> The username of the authenticated client. A hyphen (-) means t ...
- 7.SpringBoot 之 Web
添加资源处理 package org.springframework.boot.autoconfigure.web.servlet. public class WebMvcAutoConfigurat ...
- 20155205 2016-2017-2 《Java程序设计》第5周学习总结
20155205 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 如果没有try的话,出现异常会导致程序崩溃,而try则可以保证程序的正常运行下去.( ...