原博地址:http://www.cnblogs.com/dolphinX/p/3288118.html

JavaScript 有Date Array String等这样的内置对象,功能强大实用简单,但在处理一些复杂逻辑的时候,内置对象就很无力了,往往需要开发者自定义对象。

对象是什么

从JavaScript定义上讲对象是无序属性的集合,其属性可以包含基本值,对象或函数。也就是说对象是一组没有特定顺序的属性,每个属性都会映射到一个值上,是一组键值对,值可以是数据或对象。

最简单的对象

JavaScript的一对花括号{}就可以定义为一个对象,这样的写法实际上和调用Object的构造函数一样

var obj = {};
var obj2 = new Object();

这样构建出来的对象仅仅包含一个指向Object的prototype的指针,可以使用一些valueOf、hasQwnProperty等方法,没有多大实际作用,自定义对象嘛总要有一些自定义的属性、方法神马的。

var obj = {};
//添加属性 和 方法
obj.a = ;
obj.fun = function() {
alert("我是一个对象");
} var obj2 = {
a:;
fn:function(){
alert("我是自定义对象");
}
}

可以在定义万对象后通过"."为其添加属性和方法,也可以使用字面量赋值方法在定义对象的时候为其添加属性和方法。这样创建的对象,其方法和属性可以直接使用对象引用,类似于类的静态变量和静态函数,这样创建的对象又一个明显的缺陷----在定义大量对象的时候 很费力,要一遍遍的写几乎重复的代码。

抽象一下

既然是重复代码就可以抽象出来,用函数来做这些重复的工作,在创建对象的时候调用一个专门创建对象的方法,对于不同的属性值只需要传入不同的参数就行。

window.onload = function() {
var obj = createObj(2,function() {
alert(this.a);
});
obj.fn(); } function createObj(a,fn) {
var obj = {};
obj.a = a;
obj.fn = fn;
return obj;
}

这样创建大量对象的时候,就可以调用创建对象的方法来做一些工作了,这种方式也不完美,因为在很多时候需要判断对象的类型,上面的代码创建出来的对象都是最原始的Object对象实例,只是拓展了一些属性和方法。

有型一些

又是function出场的时候,JavaScript中function就是个对象,在创建对象的时候可以抛开上面的createObj(),直接使用function作为对象,怎么实现复用呢,这就在于function作为对象的特殊性了。

(1)function可以接受参数,可以根据参数来创建相同类型不同值的对象。

(2)function作为构造函数(通过new操作符调用)的时候会返回一个对象,

构造函数的返回值分为两种情况,当function没有return语句或者return回一个基本类型(bool,int,string,undefined,null)的时候,返回new 创建的一个匿名对象,该对象即为函数实例;如果function体内return一个引用类型对象(Array,Function,Object等)时,该对象会覆盖new创建的匿名对象作为返回值。

3. 那么使用function怎么解决类型识别问题呢,每个function实例对象都会有一个constructor属性(也不是“有”,而是可以对应),这个属性就可以指示其构造是谁,也可以使用instanceof 操作符来做判断对象是否为XXX的实例。

function Person(name) {
this.name = name;
this.fun = function() {
alert(this.name);
} } var person2=new Person('Frank');
person2.fun();

这样就完美了吧,也不是!虽然构造函数可以是对象有型,但对象的每个实例中的方法都要重复一遍!

function Person(name){
this.name=name;
this.fn=function(){
alert(this.name);
}
} var person1=new Person('Byron');
var person2=new Person('Frank'); console.log(person1.fn==person2.fn);//false

看看看,虽然两个实例的fn一模一样,但是却不是一回事儿,这如果一个function对象有一千个方法,那么它的每个实例都要包含这些方法的copy,很让内存无语啊。

完美方法

究竟有没有一种近乎完美的构造对象的方式,及不用做重复工作,又有型,对象通用方法又不必重复?其实可以发现使用function已经距离要求和接近了,只差那么一点儿——需要一个所有function对象的实例共享的容器,在这个容器内存发实例需要共享的属性和方法,正好这个容器是现成的——prototype,不了解prototype的同学可以看看JavaScript prototype

function Person(name){
this.name=name;
} Person.prototype.share=[]; Person.prototype.printName=function(){
alert(this.name);
} var person1=new Person('Byron');
var person2=new Person('Frank'); console.log(person1.printName==person2.printName);//true

这样每个Person的实例都有自己的属性name,又有所有实例共享的属性share和方法printName,基本问题都解决了,对于一般的对象处理就可以始终这个有型又有爱的创建对象模式了。

// http://www.cnblogs.com/dolphinX/p/3286177.html

HTML 学习笔记 JavaScript(创建对象)的更多相关文章

  1. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  2. HTML 学习笔记 JavaScript(面向对象)

    现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...

  3. [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  4. HTML 学习笔记 JavaScript (prototype)

    原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html 原博客的作者是一个非常牛逼的前端大神,我作为一个初学者,在此借助大神的博客进行自己的学习.在这里 ...

  5. HTML 学习笔记 JavaScript(数组)

    1.数组的创建 var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是 ...

  6. [学习笔记]JavaScript基础

    JavaScript概述 1. JavaScript定义 JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言.它是弱类型语言.仅仅能由浏览器解释运行. 当中: 脚本语言: ...

  7. HTML 学习笔记 JavaScript (String)

    String对象用于存储字符串的数据.这里我们做了JavaScript的String字符串对象常用操作总结. 创建String对象的方式 声明:String 对象的方法也可以在所有基本字符串值中访问到 ...

  8. HTML 学习笔记 JavaScript (节点)

    HTML 节点: HTML DOM定义了所有HTML元素的对象和属性 以及访问它们的方法. HTML DOM是关于如何获取 修改 添加 或 删除HTML元素的标准. 在js中通过document这个对 ...

  9. HTML 学习笔记 JavaScript (DOM)

    一 DOM 简介 通过HTML DOM 可以访问JavaScript 文档的所有元素 当网页被加载的时候,浏览器会创建页面的文档对象模型 HTML DOM 模型被构造成对象的树 HTML DOM 树 ...

随机推荐

  1. <%@ page contentType="text/html; charset=utf-8" language="java"%>每一个字符的含义

    contentType="text/html:网页类型htmlcharset=utf-8"网页编码类型language="java"网页编程语言<% @ ...

  2. [ASP.NET MVC] ASP.NET Identity登入技术剖析

    [ASP.NET MVC] ASP.NET Identity登入技术剖析 前言 ASP.NET Identity是微软所贡献的开源项目,用来提供ASP.NET的验证.授权等等机制.本篇文章介绍ASP. ...

  3. The habits of highly successful people

    1.Morning Routine (早上列行公事) Probably the most common habit ultra-successful people have is they can t ...

  4. 期待已久的2013年度最佳 jQuery 插件揭晓

    让人期待已久的2013年度最佳 jQuery 插件揭晓了.在过去的一年里,有很多很多的 jQuery 插件发布出来,而这里文章列出的这些插件从提供的功能更角度来看是其中的佼佼者.相信这些优秀的 jQu ...

  5. Bootstrap分为几部分?

    Bootstrap分为五部分: (1)起步(Startup) (2)全局CSS样式(Global CSS) (3)组件(Component) (4)插件(Plugin) (5)定制(Customize ...

  6. js 获取鼠标选中值

    if (window.getSelection) {//一般浏览器 userSelection = window.getSelection();} else if (document.selectio ...

  7. Dev TreeList 总结

    1.表格的要求:如果要求有父子节点关系,则必须有ID和ParentID字段,并且父节点ParentID字段必须指向ID字段. 2.Access表格在穿入DATATABLE的时候,要想表现出父子节点关系 ...

  8. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q139-Q141)

    Question 139You create a SharePoint solution that contains two Features named Feature1 and Feature2. ...

  9. IOS开发基础知识--碎片9

    1:两种方法删除NSUserDefaults所有记录 //方法一 NSString *appDomain = [[NSBundle mainBundle] bundleIdentifier]; [[N ...

  10. IOS开发基础知识--碎片36

    1:tabBarController跳转到另一个一级页面 当我们用tabBarController时,若已经到其中一个TabBar的子页,又要跳转到某一个一级的页面时,可以这样写 //这样就可以避免跳 ...