js 创建对象的几种方法
1、 使用object创建
var person = new Object();
person.name = "Tom";
person.age = "29";
person.job = "software engineer";
person.sayName = function(){
console.log(this.name);
} console.log(typeof person); // object
console.log(person instanceof Object); //true
2、 字面量对象
var person = {
name: "Tom",
age:29,
job:"software engineer",
sayName:function(){
console.log(this.name);
}
}
console.log(typeof person); // object
console.log(person instanceof Object); //true
使用字面量创建对象比使用object创建直观一些。这两种创建对象的方式都有明显的缺点:使用同一个接口创建很对对象,会产生大量的重复代码
3、 工厂模式
function createPerson(name,age,job){
var o = new Object();
o.name = name;
o.job = job;
o.age = age;
o.sayName = function(){
console.log(this.name);
}
return o;
}
var p1 = createPerson("Tom",29,"software engineer");
var p2 = createPerson("Jerry",32,"doctor");
console.log(typeof p1); // object
console.log(p1 instanceof createPerson); // false
工厂模式,可以使用同一种接口创建多个对象,且很简洁。但也有一个问题:无法确定该对象实例属于哪种对象类型(instanceof 无效)。
4、构造函数模式
function Person(name,age,job){
this.name = name;
this.job = job;
this.age = age;
this.sayName = function(){
console.log(this.name);
}
}
var p1 = new Person("Tom",29,"software engineer");
var p2 = new Person("Jerry",32,"doctor");
console.log(typeof p1); // object
console.log(p1 instanceof Person); // true
console.log(p1 instanceof Object); // true
console.log(p1.constructor == Person); // true
p1.sayName(); //Tom
//构造函数当作普通函数来使用
Person("jack",30,"driver");
window.sayName(); // jack
// 在另一个对象的作用域中使用
var o = new Object();
Person.call(o,"Kristen",25,"Nurse");
o.sayName() // Kristen
Person() 函数没有显示地创建对象,直接将属性和方法赋给了this对象,没有 return 语句。
使用 new 操作符创建新的对象实例,调用构造函数实际上会经过以下步骤:创建一个新对象,将构造函数的作用域赋给新对象(this指向这个新对象),执行构造函数中的代码(为新对象添加属性),返回新对象。
构造函数也是函数,也可以正常调用。
构造函数的缺点是:每个的方法都要在每个对象实例上重新创建一遍,上面创建的p1 、p2都有一个sayName()的方法,但这两个方法不是同一个Function的实例,因为每定义一个函数就是实例化了一个对象
function Person(name,age,job){
this.name = name;
this.job = job;
this.age = age;
this.sayName = new Function("console.log(this.name);"); //逻辑上与声明函数是等价的,并且每创建一个对象就要执行一次
}
var p1 = new Person("Tom",29,"software engineer");
var p2 = new Person("Jerry",32,"doctor");
console.log(p1.sayName == p2.sayName); // false
当然为了构造函数创建对象时,每个函数都是同一个Function实例,也可以使用全局函数:
function Person(name,age,job){
this.name = name;
this.job = job;
this.age = age;
this.sayName = sayName; // 使用全局函数
}
function sayName(){
console.log(this.name);
}
var p1 = new Person("Tom",29,"software engineer");
var p2 = new Person("Jerry",32,"doctor");
console.log(p1.sayName == p2.sayName); // true
但是这样,如果有很多函数,就要定义很多全局函数,没有封装性
5、原型模式
每个函数都有一个 prototype 属性,一个指向某个对象(原型对象)的指针,原型对象中包含着所有实例共享的属性和方法。那么就可以使用原型来新建对象
function Person(){
}
Person.prototype.name = "Tom";
Person.prototype.job = "software engineer";
Person.prototype.friends = ["Shelby","Court"];
Person.prototype.age = 29;
Person.prototype.sayName = function (){
console.log(this.name);
};
var p1 = new Person();
var p2 = new Person();
p1.friends.push("Van");
p1.sayName(); // Tom
p2.sayName(); // Tom
console.log(p1.friends); // "Shelby,Court,Van"
console.log(p2.friends); // "Shelby,Court,Van"
console.log(p1.friends == p2.friends); // true
console.log(p1.sayName == p2.sayName); // true
很明显,单独使用原型新建对象时,不能传递参数,并且会因为所有对象的数据都一样而不能添加某个对象自己的特性
6、构造函数和原型模式的组合模式
function Person(name,age,job){
this.name = name;
this.job = job;
this.age = age;
this.friends = ["Shelby","Court"];
}
Person.prototype.sayName = function (){
console.log(this.name);
};
var p1 = new Person("Tom",29,"software engineer");
var p2 = new Person("Jerry",32,"doctor");
p1.friends.push("Van");
p1.sayName(); // Tom
p2.sayName(); // Jerry
console.log(p1.friends); // "Shelby,Court,Van"
console.log(p2.friends); // "Shelby,Court"
console.log(p1.friends == p2.friends); // false
console.log(p1.sayName == p2.sayName); // true
这是一种常用模式
也可以对其进行一些修改:
function Person(name,age,job){
this.name = name;
this.job = job;
this.age = age;
this.friends = ["Shelby","Court"];
if(this.sayName != "function"){
Person.prototype.sayName = function (){
console.log(this.name);
};
}
}
现在自身属性和原型的初始化,都封装在构造函数中,看起来更像面向对象。这样的写法下,不能使用对象字面量重写原型,因为对象字面重写原型不会让现有实例和新原型联系起来,与现有实例联系的还是旧原型。
js 创建对象的几种方法的更多相关文章
- js创建对象的三种方法:文本标识法和构造器函数法和返回对象的函数
文本标识法和定义变量差不多,像这样 var obj = {name:'HanMM','2':'Dali'}; 函数构造器法 先创建一个对象函数 function Obj() { this.addre ...
- js创建对象的三种方法
1.使用对象初始化器:{} var person = {....} 2 var person=new object() function person(参数) { this.参数=... } var ...
- java中需要关注的3大方面内容/Java中创建对象的几种方法:
1)垃圾回收 2)内存管理 3)性能优化 Java中创建对象的几种方法: 1)使用new关键字,创建相应的对象 2)通过Class下面的new Instance创建相应的对象 3)使用I/O流读取相应 ...
- 创建对象的两种方法: new 和 面向对象(对象字面量)及对象属性访问方法
创建对象的两种方法: new 和 面向对象(对象字面量)用 new 时:var o = new Object();o.name = "lin3615";alert(o.name); ...
- js去除空格12种方法
注:本文非本人原著:原文作者: 黄卉 <js去除空格12种方法> //JS去除空格的方法目前共有12种: //实现1 String.prototype.trim = function() ...
- Javascript 创建对象的三种方法及比较【转载+整理】
https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain 本文内容 引 ...
- 判断数组的方法/判断JS数据类型的四种方法
参考文: 以下 3 个判断数组的方法,请分别介绍它们之间的区别和优劣Object.prototype.toString.call() . instanceof 以及 Array.isArray() h ...
- 判断JS数据类型的四种方法
在 ECMAScript 规范中,共定义了 7 种数据类型,分为 基本类型 和 引用类型 两大类,如下所示: 基本类型:String.Number.Boolean.Symbol.Undefined.N ...
- 判断JS数据类型的几种方法
原文转自http://www.cnblogs.com/onepixel/p/5126046.html! 说到数据类型,我们先说一下JavaScript 中常见的几种数据类型: 基本类型:string, ...
随机推荐
- Spring MVC 学习笔记10 —— 实现简单的用户管理(4.3)用户登录显示全局异常信息
</pre>Spring MVC 学习笔记10 -- 实现简单的用户管理(4.3)用户登录--显示全局异常信息<p></p><p></p>& ...
- <转载> nginx服务器安装及配置文件详解 https://segmentfault.com/a/1190000002797601
nginx在工作中已经有好几个环境在使用了,每次都是重新去网上扒博客,各种编译配置,今天自己也整理一份安装文档和nginx.conf配置选项的说明,留作以后参考.像负载均衡配置(包括健康检查).缓存( ...
- django之runserver命令分析
def inner_run(self, *args, **options):#runserver命令执行的内容 # If an exception was silenced in Management ...
- springMVC数据模型model,modelmap,map,@ModelAttribute的相互关系
结论: a.注解方法中形参为model,modelmap,map一个或几个时,他们指向的引用对象相同即他们的值相同. b.当使用@ModelAttribute注解请求参数时,springmvc自动将该 ...
- nginx配置资源缓存
缓存nginx服务器的静态文件.如css,js,htm,html,jpg,gif,png,flv,swf,这些文件都不是经常更新.便于缓存以减轻服务器的压力. 打开配置文件/usr/local/ngi ...
- 浅谈 volatile 的实现原理
在并发编程中我们一般都会遇到这三个基本概念:原子性.可见性.有序性.我们稍微看下volatile 原子性 原子性:即一个操作或者多个操作 要么全部执行并且执行的过程不会被任何因素打断,要么就都不执行. ...
- Vue.js学习和第一个实例
第一个实例效果图: 1.node.js下载,然后安装.下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2.下载Vue.js.链接:http://pan. ...
- 阅读程序 回答问题——FindTheNumber
阅读程序 回答问题——FindTheNumber 阅读下面程序,请回答如下问题:问题1:这个程序要找的是符合什么条件的数?问题2:这样的数存在么?符合这一条件的最小的数是什么?问题3:在电脑上运行这一 ...
- 创建模式--原型模式(JAVA)
原型模式: 原型模式主要针对模型对象类型的克隆,对已有构造好的对象进行复制获取一个新的对象实例.比如我们在获取一个对象并成功赋值后,要传递给多个处理类去处理. 打个比方:吃面是个处理类,面是个模型对象 ...
- Mysql 死锁分析学习
https://blog.csdn.net/aesop_wubo/article/details/8286215 * CREATE TABLE `user_item` ( * `id` BIGIN ...