博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js几种创建对象的方式
阅读量:6822 次
发布时间:2019-06-26

本文共 2820 字,大约阅读时间需要 9 分钟。

javascript是一种“基于prototype的面向对象语言“,与java有非常大的区别,无法通过类来创建对象。那么,既然是面象对象的,如何来创建对象呢?

一、通过”字面量“方式创建。

方法:将成员信息写到{}中,并赋值给一个变量,此时这个变量就是一个对象。 例如:
var person = (name:'dongjc', work:function() {console.log('write coding')});

如果{}中为空,则将创建一个空对象:

var person = {} //创建空对象

  

演示代码:

  

 我们还可以给对象丰富成员信息。
  对象.成员名称 = 值;
  对象[成员名称] = 值;
也可以获取对象的成员信息。
  对象.成员名称;
  对象[成员名称];

  

二、使用工厂模式创建对象

 

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通过创建对像时,会自动调用构造函数,因此该方法称为通过"构造函数“方式创建对象。

  

此代码一共会两次跳出对话框,原因在于创建对象是自动执行了该函数。

注意:this关键字的使用。这里的this与php中话法意思类似,指调用该函数的对象,这里指的是person。

 

对比工厂模式,我们可以发现以下区别:

1.没有显示地创建对象

2.直接将属性和方法赋给了this对象

3.没有return语句

4.终于可以识别的对象的类型。对于检测对象类型,我们应该使用instanceof操作符,我们来进行自主检测:

 

1
2
3
4
alert(person1
instanceof
Object);
//ture
alert(person1
instanceof
Person);
//ture
alert(person2
instanceof
Object);
//ture
alert(person2
instanceof
Object);
//ture

同时我们也应该明白,按照惯例,构造函数始终要应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。

那么构造函数确实挺好用的,但是它也有它的缺点:

就是每个方法都要在每个实例上重新创建一遍,方法指的就是我们在对象里面定义的函数。如果方法的数量很多,就会占用很多不必要的内存。于是出现了第五种创建对象的方法

 

 

 

四、通过object方式创建。

方法:先通过object构造器new一个对象,再往里丰富成员信息。

 var obj = new Object(); 

实例代码:

 

五、使用工厂模式创建对象

 

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');

  

转载于:https://www.cnblogs.com/Im-Victor/p/9431498.html

你可能感兴趣的文章
处理 Oracle SQL in 超过1000 的解决方案
查看>>
精致的JS提示
查看>>
Visual Studio.Net 2005中用SqlDataSource处理数据库特殊数据类型
查看>>
【CSS】创建布局
查看>>
docker进入容器的方式
查看>>
详解JavaScript闭包
查看>>
Oracle 介绍 (未完待续)
查看>>
pitch yaw roll是什么
查看>>
windows2003批量添加和导出所有ip
查看>>
消息服务介绍
查看>>
【Android 我的博客APP】1.抓取博客首页文章列表内容——网页数据抓取
查看>>
从Ubuntu12.04LTS到Foreda19再到Foreda8
查看>>
Qt之对话框设计——电子时钟
查看>>
JS:1.7,窗口(window)对象 window.close,window.open
查看>>
ASP.NET MVC 4 视图页去哪里儿
查看>>
队列,图,栈,树
查看>>
MHL技术剖析,比HDMI更强【转】
查看>>
ASP.NET MVC 5 学习教程:控制器传递数据给视图
查看>>
Autodesk 360 Viewer 已经发布到Autodesk 360平台
查看>>
SpringMVC使用@Valid注解进行数据验证
查看>>