HTML 学习笔记 JavaScript(创建对象)
原博地址: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(创建对象)的更多相关文章
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
- HTML 学习笔记 JavaScript(面向对象)
现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...
- [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- HTML 学习笔记 JavaScript (prototype)
原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html 原博客的作者是一个非常牛逼的前端大神,我作为一个初学者,在此借助大神的博客进行自己的学习.在这里 ...
- HTML 学习笔记 JavaScript(数组)
1.数组的创建 var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是 ...
- [学习笔记]JavaScript基础
JavaScript概述 1. JavaScript定义 JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言.它是弱类型语言.仅仅能由浏览器解释运行. 当中: 脚本语言: ...
- HTML 学习笔记 JavaScript (String)
String对象用于存储字符串的数据.这里我们做了JavaScript的String字符串对象常用操作总结. 创建String对象的方式 声明:String 对象的方法也可以在所有基本字符串值中访问到 ...
- HTML 学习笔记 JavaScript (节点)
HTML 节点: HTML DOM定义了所有HTML元素的对象和属性 以及访问它们的方法. HTML DOM是关于如何获取 修改 添加 或 删除HTML元素的标准. 在js中通过document这个对 ...
- HTML 学习笔记 JavaScript (DOM)
一 DOM 简介 通过HTML DOM 可以访问JavaScript 文档的所有元素 当网页被加载的时候,浏览器会创建页面的文档对象模型 HTML DOM 模型被构造成对象的树 HTML DOM 树 ...
随机推荐
- 【工业串口和网络软件通讯平台(SuperIO)教程】六.二次开发导出数据驱动
SuperIO相关资料下载:http://pan.baidu.com/s/1pJ7lZWf 1.1 导出数据接口的作用 在数据集成系统项目中,要么是自已集成其他厂家的设备,要么是其他厂家集成自己 ...
- 从“黑掉Github”学Web安全开发
Egor Homakov(Twitter: @homakov 个人网站: EgorHomakov.com)是一个Web安全的布道士,他这两天把github给黑了,并给github报了5个安全方面的bu ...
- cocos2d-x3.3 以前版本 工程Xcode6编译时的问题
Undefined symbols for architecture i386: "_fwrite$UNIX2003", referenced from: _unixErrorHa ...
- 纯CSS3实现3D跳动小球
请使用Chrome,火狐的浏览器查看本页面,使用IE将看不到效果.如果在本页看不到一个跳动的小球,请确定您的浏览器支持CSS3,或者访问http://keleyi.com/a/bjac/iphgrtq ...
- [deviceone开发]-组件功能演示示例
一.简介 这个是官方比较早期对组件功能的展示集合,因为发布的比较早,只包含了部分组件,但是常用的组件和常用的功能都包含了.初学者推荐.二.效果图 三.相关下载 https://github.com/d ...
- Day Tips:alertstemplates.xml
1.修改Alert邮件模板,首先要注意的时候最好复制一份alertstemplates.xml,然后改一下名字,我改的是 custom_alertstemplates.xml,修改自己需要的代码部分. ...
- Linux-1:安装&忘记密码&CRT连接centos 6.5
我是在虚拟机VM安装的centos 6.5 一.Linux安装 Ctrl + Alt:鼠标退出LINUX界面 安装我是参考,当然也可以根据网上教程安装:http://oldboy.blog.51cto ...
- MVC学习系列3--怎么从控制器向视图传递数据
在MVC中,从控制器到视图,传递数据,可以使用 ViewData 和 ViewBag:同样从视图到控制器,传递数据,可以使用Post,QueryString,或者隐藏域:最后从控制器到控制器,传递数据 ...
- ORA-10635: Invalid segment or tablespace type
上周星期天在迁移数据时,碰到了ORA-10635: Invalid segment or tablespace type 错误,当时的操作环境如下: 操作系统版本: [oracle@xxxxx scr ...
- SSRS Reports 2008性能优化案例二
前几天一同事反映海外工厂A的SSRS报表比较慢,让我检查优化一下.于是我检查了下2015-07-13到2015-07-15 12:00这段时间报表的耗时记录 USE [ReportServer]; ...