1.工厂模式

function createPerson(name,age,job){ 
var o = {}; 
o.name = name; 
o.age = age; 
o.job = job; 
o.sayName = function(){ 
alert(this.name); 
}; 
return o; 

var tanya = createPerson("tanya","30","female"); 
var ansel = createPerson("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

这里先定义o为一个空的对象,然后为o设置了一堆属性。其实也可以直接给o属性的嘛,所以如果这样写也是ok的。

function createPerson(name,age,job){ 
var o = { 
name : name, 
age : age, 
job : job, 
sayName : function(){ 
alert(this.name); 

}; 
return o; 

var tanya = createPerson("tanya","30","female"); 
var ansel = createPerson("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

2.构造函数模式

unction Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 

var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

在这个例子中,tanya和ansel都有一个constructor属性,该属性指向person。 
考虑一下如下的情况:

function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 

Person("tanya","30","female"); 
Person("ansel","30","male"); 
window.sayName(); 
window.sayName();

发现两次弹出的都是ansel,这是因为不用new的话,就不是一个person的实例,而仅仅在执行函数。而在全局作用域调用一个函数时this总是指向Global对象。而Global对象在浏览器中就是window对象。

我们还可以用构造模式在另外一个对象中调用sayName方法,还记得Apply和call么,来吧再考虑另外一种情况,

function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 

var olivia = {}; 
Person.call(olivia,"tanya","30","female"); 
olivia.sayName(); 
var philip = {} 
Person.apply(philip,["ansel","30","male"]); 
philip.sayName();

原型模式就要考虑原型链了,分析一下,sayName方法在实例中被重复定义了两次,但其实没有必要创造两个一样的副本。使用原型方法,可以使是tanya和ansel的共享一个sayName方法。 
于是原型模式的写法如下:

function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 

Person.prototype.sayName= function(){ 
alert(this.name); 
}; 
var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

js定义对象的更多相关文章

  1. js定义对象的几种容易犯的错误

    //js定义对象的几种容易犯的错误function Person() { getName = function (){ console.info(1); }; return this;}//Perso ...

  2. 【JS】#001 JS定义对象写法(原型、JSON方式)

    下面主要写两种 JS 定义对象的 常用写法 写法1:[很像面向对象语言中的写法] function zhongxia(age) { this.age = age; } zhongxia.name = ...

  3. JS定义对象方法?

    第一种:构造函数形式  把参数作为构造函数的参数传递,这样对于对象的初始化更灵活一点 <script language="javascript"><!-- /** ...

  4. js定义对象并赋值

    1.可以通过  var ratio = {}; ratio.low = 70; ratio.high = 90; ratio.scale = 0.2; 2.可以通过 var obj = new Obj ...

  5. 认识JS的基础对象,定义对象的方法

    JS的基础对象: 1.window       //窗口对象 2.document   //文档对象 3.document.documentElement      //html对象 4.docume ...

  6. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  7. JS笔记2 --定义对象

    16.javascript中定义对象的几种方式(javascript中没有类的概念,只有对象): 1)基于已有对象扩充其属性和方法: var object = new Object(); object ...

  8. js定义类或对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

随机推荐

  1. C# xml可序列化多值枚举脚本

    代码: using System; using System.Collections.Generic; using System.Xml; using System.Xml.Schema; using ...

  2. ModelSim之tcl自动化仿真

    摘要: ModelSim的tcl最大的优势就在于它可以让整个仿真自动运行,免除每次进行各种用户界面控制操作的麻烦.用tcl就可以自动完成建库.映射库到物理目录.编译源代码.启动仿真器.运行仿真等一系列 ...

  3. 带包的java类在cmd环境下的执行办法

    带包的java类在cmd环境下的执行办法:工程目录为D:\Program Files\eclipse\workspace\ReadFileByLinesUniq上面目录下有两个文件夹bin和src源文 ...

  4. 一个div宽度不固定的左右居中效果

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  5. encoding/path可能引起无数奇怪的问题

    例如如下代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...

  6. python2 除法保留两位小数

  7. C#的参数类型:params、out和ref

    parmas类型的参数 using System; public class MyClass { public static void UseParams(params int[] list) { ; ...

  8. Gtest创建第一个测试

    gtest测试框架是在不同平台上(Linux,Mac OS X,Windows,Cygwin,Windows CE和Symbian)为编写C++测试而生成的.它是基于xUnit架构的测试框架,支持自动 ...

  9. HTML5 Canvas 梦幻的文字飞扬动画教程

    之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览   源码下载 实现代码如下: html ...

  10. JS地毯式学习四

    1  窗口的位置 用来确定和修改 window 对象位置的属性和方法有很多. IE . Safari . Opera 和 Chrome都提供了 screenLeft 和 screenTop 属性,分别 ...