javascript 创建对象方式
本文主要是对《JavaScript高级程序设计》第六章(面向对象的程序设计)的总结,书上的这章至少看了4遍是有的。该章主要讲对象的创建与继承。其中创建对象和继承方式至少6种,再加上一些方法属性,很容易搞得晕头转向的。因此有必要对本章的内容理一理,以后忘了也好过来看一看。
由于文章长度的限制,本文主要讲创建对象。
1创建对象
1.1 一般方法
使用Object或者采用对象字面量的方法。
var o = {a: 1};
var o2=new Object();
o2.a=1;
缺点:使用同一个接口创建很多对象,会产生大量重复的代码。
1.2工厂模式
function parent(name,age){
var Child = new Object();
Child.name=name;
Child.age=age;
Child.sayHi=function(){
console.log("Hi");
}
return Child;
}; var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi
函数parent能够根据接受的参数来构建一个包含所有必要信息的child对象。可以无限次调用这个函数,都会返回一个包含两个属性和一个方法的对象。
解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。
1.3构造函数模式
对于构造函数这个名字,学过java或者c++的同学应该都是知道的,在js里也是差不多的。
用构造函数将上面的例子重写如下:
function Parent(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){
console.log("Hi");
};
} var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi
对于构造函数,我们需要在调用的时候加关键字 new。要注意的是,构造函数始终是以一个大写字母开头,而非构造函数始终是以一个小写字母开头。
与工厂模式相比,主要有以下几个不同之处:
- 没有显示地创建对象;
- 直接将属性和方法赋给了this对象;
- 没有return语句。
缺点:使用构造函数的缺点就是每个方法都需要在每个实例上重新创建一遍。
1.4原型模式
我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性与方法。使用原型对象的好处是可以让所有的对象实例共享其包含的属性与方法。
function Parent(name,age){
Parent.prototype.name=name;
Parent.prototype.age=age;
Parent.prototype.sayHi=function(){
console.log("Hi");
};
} var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi
缺点:优点就是其缺点,方法属性都可以共享。具体可以看下面这个例子
function Parent(name,age){
Parent.prototype.name=name;
Parent.prototype.age=age;
Parent.prototype.arr=["123","we"];
Parent.prototype.sayHi=function(){
console.log("Hi");
};
} var x = new Parent("Tom",12);
var y = new Parent("Tom1",12); x.arr.push("x");
y.arr.push("y"); console.log(x.arr);//["123", "we", "x", "y"]
console.log(y.arr);//["123", "we", "x", "y"]
对象x修改自己的属性,竟然会影响到y对象;同理,对y也一样。这个明显就很不合理啊,太可怕了!
1.5组合使用构造函数模式和原型模式
function Parent(name,age){
//只把属性留在这里定义,方法放在原型对象中
this.name=name;
this.age=age;
} //第一种方式
Parent.prototype.sayHi=function(){
console.log("Hi");
}; //第二种方式
//由于采用对象字面量,因此必须修正其constructor属性;
Parent.prototype={
constructor:Parent,
sayHi:function(){
console.log("Hi");
}
} var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi
在这个例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性constructor和方法则是在原型中定义的。
是目前使用最广泛、认同度最高的一种创建自定义类型的方法。
--------------------------感觉后面几种方法有些变态了--------------------------------
1.6 动态原型模式
function Parent(name,age){
this.name=name;
this.age=age;
if( typeof this.sayHi !="function"){
Parent.prototype.sayHi=function(){
console.log("Hi");
};
}
} var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi
先检查某个应该存在方法是否有效再来决定是否需要初始化原型。
1.7寄生构造函数模式
当前面几种都不适用的情况下,可以使用寄生构造函数模式。这种函数的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象。
function parent(name,age){
var Child = new Object();
Child.name=name;
Child.age=age;
Child.sayHi=function(){
console.log("Hi");
}
return Child;
}; var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi
但是其实就是和工厂模式一模一样,你TM在逗我吗?????
1.8稳妥构造函数模式
稳妥构造函数遵循与寄生构造函数模式类似的模式,但有两点不同:一是新创建对象的实例方法不引用this; 二是不使用new操作调用构造函数。
function Parent(name,age){
var o=new Object();
//私有变量或者方法
var name=name,
age=age;
o.sayName=function(){
//name前面没有this
console.log(name+" "+age)
}
return o;
} var x = Parent("Tom",12);
x.sayName(); //Tom 12
变量x中保存的是一个稳妥对象,而除了调用sayName()方法外,没有别的方式可以访问其数据成员。
javascript 创建对象方式的更多相关文章
- javascript创建对象的几种方式
javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON:但写法有很多种,也能混合使用.主要为下面几种:1.对象字面量的方式 person={firstname ...
- JavaScript创建对象的6种方式
JavaScript创建对象简单的说,无非就是使用内置对象(Object)或各种自定义对象,当然还可以用JSON,但写法有很多种,也能混合使用. 1.对象字面量的方式 person = {name : ...
- JavaScript 创建对象的七种方式
转自:xxxgitone.github.io/2017/06/10/JavaScript创建对象的七种方式/ JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以 ...
- JavaScript创建对象的几种 方式
//JavaScript创建对象的七种方式 //https://xxxgitone.github.io/2017/06/10/JavaScript%E5%88%9B%E5%BB%BA%E5%AF%B9 ...
- javascript创建对象的几种方式?
javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON:但写法有很多种,也能混合使用. 1.对象字面量的方式 person={ firstname:" ...
- Javascript 创建对象方法的总结
最近看了一下<Javascript高级程序设计(第三版)>,这本书很多人都推荐,我也再次郑重推荐一下.看过之后总得总结一下吧,于是我选了这么一个主题分享给大家. 使用Javascript创 ...
- JavaScript 引入方式 语言规范 语言基础 数据类型 常用方法 数组 if_else 比较运算符 for while 函数 函数的全局变量和局部变量 {Javascript学习}
Javascript学习 JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript ...
- JavaScript创建对象(三)——原型模式
在JavaScript创建对象(二)——构造函数模式中提到,构造函数模式存在相同功能的函数定义多次的问题.本篇文章就来讨论一下该问题的解决方案——原型模式. 首先我们来看下什么是原型.我们在创建一个函 ...
- Javascript 创建对象的三种方法及比较【转载+整理】
https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain 本文内容 引 ...
随机推荐
- Maven的插件管理
<pluginManagement> 这个元素和<dependencyManagement>相类似,它是用来进行插件管理的. 在我们项目开发的过程中,也会频繁的引入插件,所以解 ...
- SRM479
250pt: 题意:有一排一共44,777,777个人,每个人需要咖啡或者茶,队伍的头部有一台饮料机,有一个空姐负责给所有人送饮料,她一开始在也头部.空姐拿一个水壶,一开始是空的,可以在饮料机的地方加 ...
- EBS 取消“是否提交另一项请求”提示
在使用EBS提交请求后,总要弹出“是否提交另一项请求”的提示,而我们往往选择“否”,这个提示就显得多余. 为了减轻这“多一步”的负担,取消“是否提交另一项请求”的提示,设置方法如下: 以下profil ...
- 第一章 在.net mvc生成EF入门
一. 打开Visual Studio 2017(我使用的是2017) 新建一个mvc项目 命名为StudentEntity 二.1)建立完项目后在项目中右击选择新建项,找到ADO.NET实体数据模型 ...
- 第二节:创建模型,使用Code First,配置映射关系
这一节,实现模型的创建,配置映射关系 使用Code First数据迁移. 创建模型 一,首先创建几个接口:实体接口,聚合根接口,值对象接口 1,实体接口: 2,聚合根接口: 3,值对象接口: 二,模型 ...
- 【Atcoder】 AGC032赛后总结
比赛前 emmm,今天是场AGC,想起上次我的惨痛经历(B都不会),这次估计要凉,可能A都不会Flag1 比赛中 看场看了波\(A\),咦,这不是很呆的题目吗?倒着扫一遍就好了. 然后切了就开始看B, ...
- [学习笔记]CDQ分治和整体二分
序言 \(CDQ\) 分治和整体二分都是基于分治的思想,把复杂的问题拆分成许多可以简单求的解子问题.但是这两种算法必须离线处理,不能解决一些强制在线的题目.不过如果题目允许离线的话,这两种算法能把在线 ...
- Synchronzied与ReentrantLock
- spring-boot集成thymeleaf。
thymeleaf是前台页面展示,原来一直是jsp,jsp中包含很多服务器端的逻辑,逐渐淘汰.同样功能的还有freemarker.孰好孰坏不予评价,只做简单实现. 1.基本思路 (1)pom.xml中 ...
- ES6中的元编程-Proxy & Reflect
前言 ES6已经出来好久了,但是工作中比较常用的只有let const声明,通过箭头函数改this指向,使用promise + async 解决异步编程,还有些数据类型方法...所以单独写一篇文章学习 ...