快速学习JavaScript面向对象编程
到处都是属性、方法,代码极其难懂,天哪,我的程序员,你究竟在做什么?仔细看看这篇指南,让我们一起写出优雅的面向对象的JavaScript代码吧!
作为一个开发者,能否写出优雅的代码对于你的职业生涯至关重要。随着像Node.js这类技术的发展,你甚至可以在服务器端使用JavaScript了。同样的,你也可以使用JavaScript来控制MongoDB的持续数据存储。
文本标记
文本标记只是JavaScript里创建对象的一种方法,当然这里肯定不止这一种,但它是你在只打算创建一个对象实例时的首选方法。
var bill = {};
上面的代码并不实用,它只是一个空对象。接下来我们动态地向这个对象中添加一些属性和方法。
bill.name = "Bill E Goat";
bill.sound = function() {
console.log( 'bahhh!' );
};
这里添加了属性name,并且给它分配了值"Bill E Goat"。我们并不需要先创建一个空对象,而可以把所有代码直接写在一对括号里。
var bill = {
name: "Bill E Goat",
sound: function() {
console.log( 'bahhh!' );
}
};
//keleyi.com
是不是很美观?访问它的属性和方法就像呼吸一样简单、自然。
bill.name; // "Bill E Goat"
bill.sound(); // "bahhh"
如果属性名不是一个合法的标志符,我们还可以这样访问它:
bill['name']; // "Bill E Goat"
注意:我在调用方法时在其后添加了圆括号。现在,我们再重写一下当前的sound方法,并添加一个参数。
bill.sound = function(noise) {
console.log(noise);
};
bill.sound("brrr!"); // "brrr!" He's cold :)
很好,我们已经传入参数了,并且在方法定义中访问了它。接下来,向对象中增加一个新方法来访问name属性。
bill.sayName = function() {
console.log( "Hello " + this.name );
};
bill.sayName(); // "Hello Bill E Goat"
我们可以使用this.propertyName(在本例中即this.name)在方法内访问属性。
bill.sayName; // function
怎么回事?访问sayName方法返回了一个方法定义。现在让我们再深入些。
var sound = bill.sound;
sound('moo!'); // "moo!"
现在我们指定了sound方法为一个局部函数,可以调用这个函数并且传递参数。你认为在复制bill的时候会发生什么?(类比下克隆羊Dolly)
var sally = bill;
sally.name; // "Bill E Goat",可它的名字是Sally
sally.name = "Sally";
sally.name; // "Sally",好些了
bill.name; // "Sally",问题又转移到bill身上了
上面的例子中我们新建了一个变量sally,并使它和bill相同,所以bill和sally会在内存中引用了同一个对象。这时候给改变一块它们就会同时发生改变。再看看下面这段代码:
bill.name = "Bill E Goat";
bill.sayName(); // "Hello Bill E Goat";
var sayName = bill.sayName;
sayName; // function 目前为止一切顺利
sayName(); // "Hello ",为什么这里又不再显示bill的名字了?
bill的name是一个本地实例变量,只对bill可得。当sayName方法被创建为全局变量时,当它碰到this.name声明时,它会在全局查找name的值。唯一的问题在于name还没有被定义。现在让我们在全局定义name,看看会发生什么:
var name = "Bearded Octo";
sayName(); // "Hello Bearded Octo"
//keleyi.com
这里我们在全局范围内定义了name变量,并且赋予了值"Bearded Octo"。当我们在调用sayHello方法时它会在全局范围内查找name变量,最终会获得值"Bearded Octo"。我们为什么不为这几个对象建立一个共同的“类”呢?
构造函数
构造函数是另一个编写面向对象JavaScript代码的方法,当你需要初始化对象的属性、方法,或者需要创建多个属性、方法各不相同的实例时,它将是你最佳的选择。同样我们先从创建一个空对象开始:
unction Game() {}; var zelda = new Game();
var smb = new Game();
zelda.title = "Legend of Zelda";
smb.title = "Super Mario Brothers";
zelda.title; // "Legend of Zelda"
smb.title; // "Super Mario Brothers"
现在这个对象已经有自己的方法了!新创建对象时我们甚至可以传递属性,之后再修改。
function Game(title) {
this.title = typeof title !== 'undefined' ? title : "";
};
var zelda = new Game("Legend of Zelda");
zelda.title; // "Legend of Zelda"
zelda.title = "Ocarina of Time";
zelda.title; // "Ocarina of Time"
var blank = new Game();
blank.title; // ""
也许你没看明白第二行的内容,其实是使用了三元操作来避免单行的if else,它和下面标准的if else语句是一个意思。
if (typeof title !== 'undefined') {
this.title = title;
} else {
this.title = "";
}
// Is the same as
this.title = typeof title !== 'undefined' ? title : "";
如果title变量在对象被创建时传入,title实例变量将会指定为title的值。如果没有值传入,那么title将会被初始化为默认值""。我们同样可以创建一个方法来访问这个属性:
zelda.loveTitle = function() {
console.log( "I love " + this.title );
};
zelda.loveTitle(); // "I love Ocarina of Time"
这样就很整洁了,但是我们还能做得更好。我们可以在Game类中添加一个方法,这样所有Game类的实例将都能使用此方法。
Game.prototype.heartIt = function() {
console.log( "I heart " + this.title );
};
zelda.heartIt(); // "I heart Ocarina of Time"
smb.heartIt(); // "I heart Super Mario Brothers"
后记:当然这只是JavaScript面向对象编程的入门,OO JS还有很多内容可以讲。
快速学习JavaScript面向对象编程的更多相关文章
- 从Prototype学习JavaScript面向对象编程
概述 JavaScript是一种基于对象的编程语言.它是灵活的,既有面向过程(也就是面向函数)的编程,也有面向对象的编程.因此我称它是基于对象的编程语言. 对于JavaScript的面向过程的编程特性 ...
- 快速理解JavaScript面向对象编程—原型
总的来说js语言就是门面向对象编程的语言,对象这个概念几乎贯穿了整个js的学习. 对象 创建对象两种方法:(若要生成对象实例必须调用构造函数) 1.var obj = {name:"jer& ...
- 简单学习JavaScript面向对象编程
JavaScript是一种弱类型语言.有一种原型机制. 1.创建一个空对象:var bill = {}; 给这个对象添加属性和方法: bill.name = "Bill E Goat&quo ...
- JavaScript面向对象编程学习笔记
1 Javascript 面向对象编程 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例 ...
- 再谈javascript面向对象编程
前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始 ...
- 转:javascript面向对象编程
作者: 阮一峰 日期: 2010年5月17日 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学 ...
- Javascript 面向对象编程(一):封装 作者:yuan一峰
学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大 ...
- JavaScript面向对象编程(2)-- 类的定义
最近这一段时间事情太多了,没有时间再继续写,幸好这两天有点小闲,先小写一下JavaScript中面向对象一中推荐的方法.本文承接上一篇JavaScript面向对象编程(1) -- 基础. 上篇说过,J ...
- 深入理解Javascript面向对象编程
深入理解Javascript面向对象编程 阅读目录 一:理解构造函数原型(prototype)机制 二:理解原型域链的概念 三:理解原型继承机制 四:理解使用类继承(继承的更好的方案) 五:建议使用封 ...
随机推荐
- 曲演杂坛--特殊字符/生僻字与varchar
对于中文版的SQL SERVER,默认安装后使用的默认排序规则为Chinese_PRC_CI_AS,在此排序规则下,使用varchar类型来可以“正常存取”存放中文字符以及一些东南亚国家的字符,同时v ...
- Unity3D逻辑热更新,第二代舒爽解决方案,L#使用简介
热更新 天下武功,无坚不破,唯快不破 热更新就是为了更快的把内容推到用户手中. 之前,我设计了C#Light,经过半年多的持续修补,勉强可用,磕磕绊绊.感谢那些,试过,骂过,用过的朋友,在你们的陪伴下 ...
- 赴美工作常识(Part 6 - 绿卡排队)
上一篇<赴美工作常识(Part 5 - 绿卡优先级)>解释完排队的优先级是怎么确定的,以及 PERM 和 I–140 表的意义,接下来就要解释一下队具体是怎么排的以及排到之后的 I–485 ...
- Atitit 知识图谱解决方案:提供完整知识体系架构的搜索与知识结果overview
Atitit 知识图谱解决方案:提供完整知识体系架构的搜索与知识结果overview 知识图谱的表示和在搜索中的展1 提升Google搜索效果3 1.找到最想要的信息.3 2.提供最全面的摘要.4 ...
- QTP11的下载地址和破解教程
qtp11 下载地址 http://pan.baidu.com/s/1rE3l6 qtp10的破解 下载注册机http://ishare.iask.sina.com.cn/f/20991520.htm ...
- hibernate(七) hibernate中查询方式详解
序言 之前对hibernate中的查询总是搞混淆,不明白里面具体有哪些东西.就是因为缺少总结.在看这篇文章之前,你应该知道的是数据库的一些查询操作,多表查询等,如果不明白,可以先去看一下 MySQL数 ...
- 快速入门系列--MVC--03控制器和IOC应用
Asp.net MVC也接触好久了,但由于自己一直主要负责后台,尤其是数据库方面的工作对于该框架并没有一个很好的了解,尤其是蒋金楠大师的ASP.NET MVC4框架剖析一书都买了2年多了,真正认真看过 ...
- Design3:使用HierarchyID构建数据的分层结构
1,传统的分层结构是父子结构,表结构中有一个ParentID字段自引用表的主键,表示“归属”关系,例如 create table dbo.emph ( ID int not null primary ...
- 【资源】C++学习资料 - 逆天整理 - 精华无密版【最新】
再失效就太无语了,链接都是多份的~~—————————————————基础——————————————C++环境搭建(全套)http://pan.baidu.com/s/1o6y0smY链接:http ...
- PHP扩展开发入门
原文:http://www.orlion.ga/1090/ 写一个最简单的将字符串全部变成大写的函数: <?php function my_toupper($str) { return strt ...