JS学习-创建对象

1、标准创建对象模式

1 var person = new Object();
2 person.name = "Nicholas";
3 person.age = 29;
4 person.job = "Software Engineer";
5 person.sayName = function(){alert(this.name);};

2、字面量模式

1 var person = {
2     name: "Nicholas",
3     age: 29,
4     job: "Software Engineer",
5     sayName: function(){alert(this.name);}
6 };

3、工厂模式

 1 function createPerson(name, age, job){
 2     var o = new Object();
 3     o.name = name;
 4     o.age = age;
 5     o.job = job;
 6     o.sayName = function(){alert(this.name);};
 7     return o;
 8 }
 9 var person1 = createPerson("Nicholas", 29, "Software Engineer");
10 var person2 = createPerson("Greg", 27, "Doctor");

4、构造函数模式

1 function Person(name, age, job){
2     this.name = name;
3     this.age = age;
4     this.job = job;
5     this.sayName = function(){alert(this.name);};
6 }
7 var person1 = new Person("Nicholas", 29, "Software Engineer");
8 var person2 = new Person("Greg", 27, "Doctor");

5、原型模式

 1 function Person(){}
 2 Person.prototype.name = "Nicholas";
 3 Person.prototype.age = 29;
 4 Person.prototype.job = "Software Engineer";
 5 Person.prototype.sayName = function(){alert(this.name);};
 6 var person1 = new Person();
 7 person1.sayName(); //"Nicholas"
 8 var person2 = new Person();
 9 person2.sayName(); //"Nicholas"
10 alert(person1.sayName == person2.sayName); //true

6、组合构造函数和原型模式

 1 function Person(name, age, job){
 2     this.name = name;
 3     this.age = age;
 4     this.job = job;
 5     this.friends = ["Shelby", "Court"];
 6 }
 7 Person.prototype = {
 8     constructor : Person,
 9     sayName : function(){alert(this.name);}
10 }
11 var person1 = new Person("Nicholas", 29, "Software Engineer");
12 var person2 = new Person("Greg", 27, "Doctor");
13 person1.friends.push("Van");
14 alert(person1.friends); //"Shelby,Count,Van"
15 alert(person2.friends); //"Shelby,Count"
16 alert(person1.friends === person2.friends); //false
17 alert(person1.sayName === person2.sayName); //true

7、动态原型模式(这里只在 sayName()方法不存在的情况下,才会将它添加到原型中。)

 1 function Person(name, age, job){
 2     this.name = name;
 3     this.age = age;
 4     this.job = job;
 5     if (typeof this.sayName != "function"){
 6         Person.prototype.sayName = function(){alert(this.name);};
 7     }
 8 }
 9 var friend = new Person("Nicholas", 29, "Software Engineer");
10 friend.sayName(); 

8、寄生构造函数模式(除了使用 new 操作符并把使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。)

 1 function Person(name, age, job){
 2     var o = new Object();
 3     o.name = name;
 4     o.age = age;
 5     o.job = job;
 6     o.sayName = function(){alert(this.name);};
 7     return o;
 8 }
 9 var friend = new Person("Nicholas", 29, "Software Engineer");
10 friend.sayName(); //"Nicholas"

9、稳妥构造函数模式(一是新创建对象的实例方法不引用 this;二是不使用 new 操作符调用构造函数)

function Person(name, age, job){
    var o = new Object();
    o.sayName = function(){alert(name);};
    return o;
}
var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"
时间: 2024-08-24 03:54:47

JS学习-创建对象的相关文章

JS学习笔记-OO疑问之对象创建

问一.引入工厂,解决重复代码 前面已经提到,JS中创建对象的方法,不难发现,基本的创建方法中,创建一个对象还算简单,如果创建多个类似的对象的话就会产生大量重复的代码. 解决:工厂模式方法(添加一个专门创建对象的方法,传入参数避免重复) function createObject(name,age){ var obj =new Object(); //创建对象 obj.name = name; obj.age = age; obj.run = function(){ return this.nam

js学习笔记知识点

AJAX用法安全限制JSONPCORS面向对象编程创建对象构造函数原型继承class继承 AJAX 用法 AJAX不是JavaScript的规范,它只是一个哥们"发明"的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求 在现代浏览器上写AJAX主要依靠XMLHttpRequest对象: 'use strict'; function success(text) { var textarea = document.getE

JS学习笔记-数组

ECMAScript中没有提供类和接口等的定义,但它却是一门面向对象的语言,由于它能够通过其它 方式实现类似高级语言的面向对象功能,这些内容将在后面的文章中进行一步步的总结.此篇仅对JS中对象作简要说明,重点汇总一些类似于对象的数组的经常用法. 对象 创建 上篇提到创建对象的两种方式: 使用new运算符创建Object var obj = new Object(); 使用字面量方式创建 var   obj = {}; 这里值得注意的是在使用字面量(常量)创建Object时不会调用构造函数. 属性

JS学习:JavaScript的核心

分享到 分类 JS学习   发布 ourjs  2013-12-02 注意 转载须保留原文链接,译文链接,作者译者等信息. 作者: JeremyWei  原文: JavaScript The Core 对象 原型链 构造函数 执行上下文栈 执行上下文 变量对象 活动对象 作用域链 闭包 This 总结 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 面向读者:经验丰富的程序员,专家. 我们以思考对象的概念做为开

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

NODE.JS学习的常见误区及四大名著

NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang/p/4374681.html 收到了很多兄弟的热情回复和激烈讨论,在此深表感谢,有的朋友觉得我写的比较粗犷,没有给出具体的性能分析和对比,在此我想说的是其实好多东西的性能分析,根本就不用我写到博客上,其一是如果我写了,很多人同样会觉得不客观,不中立,其二是网上很多中立的机构,随便搜索一下,对比太多

Ext JS学习第五天 Ext_window组件(一)

此文来记录学习笔记 •第一个组件:Ext.window.Window.对于组件,也就是Ext最吸引开发者的地方,那么我们要真正的使用Ext的组件,首先必须学会阅读API文档. –xtype:组件的别名 –Hierarchy 层次结构 –Inherited mixins 混入的类 –Requires 该组件需要使用的类 –configs:组件的配置信息 –properties:组件的属性 –methods:组件的方法 –events:组件的事件 •window组件常用属性和方法讲解: •confi

JavaScript模块加载框架sea.js 学习一

简单总结sea.js 学习 文件目录结构 /sea/sea.js      下载地址  http://seajs.org/docs/#downloads /sea/jquery-sea.js   下载地址 http://jquery.com/download/ /sea/sea_config.js /sea/home.jsdata.js /sea/data.js 1.html页面代码文件 <style> .ch{height:200px;width:200px;background:#ccc;

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod