Learn JavaScript(面向对象的程序设计01)
最新更新请访问: http://denghejun.github.io
JavaScript与OOP
JavaScript作为web前端一种重要的脚本技术,已被大多开发人员所熟知。compare with the other
programming language,可能会有很多不同的地方。但据我观察大多数普通程序员仅仅会用script
做一些简单的工作,例如前端验证、DOM元素查找等。当然,不可否认,有时候似乎我们没有必要把
script代码编写的太过于复杂或是紧凑。从自我追求上讲,每个程序员都有责任将自己的代码整理的井
井有条且是有结构化的。OOP的思想是一种迎合自然的思想,它的出现不得不说让我们重新审视自己的
代码结构。Programming language 一般可以和OOP结合得很完美,所以JavaScript也不例外。今
天我们将对此进行深入的探索。
创建对象
OO的语言很明显的特征是它会有类(class)的概念,通过class,可以创建任意个数的具有相同属性和
方法的对象实例。
我们以JavaScript中创建object对象为例,你会发现他是如此简单。
var car=new object();
car.name="jeep";
car.sayName=function (){
alert(this.name);
};
car.sayName();// alert "jeep"
从上面的代码我们可以看出,Javascript创建对象的关键字是new,这与大多数OO语言相似。我们创建
car的对象,接着给予它一个name属性和一个sayName方法,以及它的调用方式,一切看起来都是那么
自然。但是问题总是被隐藏在看似优美的代码中。object是所有对象的base class,我们要创建不同类型
的对象,势必会产生很多重复代码。进而,我们必须寻求更加完美的编码方式。
工厂
设计模式中的工厂相比大家都有看过,与之类似,下面的代码将会演示产生car对象的工厂模式。
function CreateCar(name)
{
var car= new Object(); car.name=name; car.sayName=function(){
alert(this.name);
}; }
实际上它看起来也并不复杂,但似乎问题变得更为头疼了,因为每当你调用该方法后,工厂丢给你的对
象你并不知道它是什么类型的,这对于OO而言无疑是背道而驰。
构造函数模式
如果你熟悉OO语言的特点,那么你对constructor一定不会陌生。恰巧JavaScript也有。所有的OO语
言都是相同的,我甚至经常怀
疑他们疑似在互相抄袭。
构造函数模式能够很好的解决对象类型的问题,例如下边的代码,看起来一定会很不错。
function Car(name)
{ this.name=name; this.sayName=function(){
alert(this.name);
}; } var car1 =new Car("jeep");
var car2 =new Car("jack"); car1.sayName(); // alert "jeep"
car2.sayName(); // alert "jack"
每个对象都会有一个constructor属性,直接指向构造函数,例如car1.constructor==Car,car2.con
structor==Car。在构造函数指向过程中,会有一个作用域的概念,例如构造函数中的this就代表了被创
建后的对象,例如car1和car2。
接下来,我们可以很容易的检测对象的类型了:
alert(car1 instanceof Object); // true
alert(car1 instanceof Car); //true
alert(car2 instanceof Object); // true
alert(car2 instanceof Car);// true
构造函数也是一个普通的方法,它任然可以像普通函数一样的调用方式那样被调用:
像构造函数一样调用:
var car1 =new Car("jeep");
car1.sayName(); // "jeep"
像普通函数一样调用:
Car('jeep'); // 将被注册到window对象中
window.sayName();// 'jeep'
在另一个对象的作用域中调用:
var o= new Object();
Car.call(o,"jeep");
o.sayName(); // "jeep"
没错,就是你看到的那样。
好了,今天关于OOP&JavaScript就写到这里,如果你已经感受到了巨大的兴趣,请继续关注明天的更新
,明天将会继续探讨构造函数的不足之处和原型模型。
希望能与你们一起前行。如有任何疑问均可留言,转载请注明出处,你们的支持将是我持久的动力!
Learn JavaScript(面向对象的程序设计01)的更多相关文章
- JavaScript 面向对象的程序设计(一)之理解对象属性
首先,JavaScript 面向对象的程序设计,主要分三部分. 理解对象属性: 理解并创建对象: 理解继承. 本文主要从第一方面来阐述: 理解对象属性 首先我们来理解Javascript对象是什么?在 ...
- JavaScript 面向对象的程序设计
面向对象(Object-oriented,OO)的语言有一个标志,那就是它们都有类的概念.而通过类可以创建任意多个具有相同属性和方法的对象.前面提到过,ECMAScript中没有类的概念,因此它的对象 ...
- 重学js之JavaScript 面向对象的程序设计(创建对象)
注意: 本文章为 <重学js之JavaScript高级程序设计>系列第五章[JavaScript引用类型]. 关于<重学js之JavaScript高级程序设计>是重新回顾js基 ...
- javascript面向对象的写法01
类和对象 其他面向对象的语言类的语法是内置的,自然而然的事.javascript中有对象,但没有类的语法,类的实现需要模拟出来. 只需要把对象想成一个容器,里面存放一些属性或方法,把类想象成一个对象的 ...
- JavaScript面向对象的程序设计
ECMAScript支持面对对象(oo)编程,但不使用类或接口.对象可以在代码执行过程中创建和增强,因此具有动态性而非严格定义的实体.在没有类的情况下,可以此采用下列模式创建对象. 工厂模式,使用简单 ...
- javascript面向对象的程序设计之Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptor()用于获取给定属性的描述信息,这个描述信息是一个对象. 如果是访问器属性,则这个对象的属性有configurable,enumerabl ...
- JavaScript面向对象程序设计:数组
或许你会奇怪,面向对象的程序设计为什么从数组开始讲起?这是因为……其间的种种关系吧……嘿嘿,这里先卖个关子,先来看看我们熟悉的数组在JavaScript里面是什么样子的. 1. 创建数组 在J ...
- JavaScript 面向对象程序设计(下)——继承与多态 【转】
JavaScript 面向对象程序设计(下)--继承与多态 前面我们讨论了如何在 JavaScript 语言中实现对私有实例成员.公有实例成员.私有静态成员.公有静态成员和静态类的封装.这次我们来讨论 ...
- JavaScript高级程序设计学习笔记--面向对象的程序设计(二)-- 继承
相关文章: 面向对象的程序设计(一) — 创建对象 http://www.cnblogs.com/blackwood/archive/2013/04/24/3039523.html 继承 继承是OO语 ...
随机推荐
- Github上的PHP资源汇总大全
依赖管理 ——用于依赖管理的包和框架 Composer/Packagist : 一个包和依赖管理器 Composer Installers: 一个多框架Composer库安装器 Pickle: 可以 ...
- html用户注册界面
html用户注册界面 先上一张简约的界面的效果图 这里是style里面的内容 <style> input[type]{ border: 1px solid darkorange; ba ...
- C#高级编程笔记 Day 8, 2016年9月 28日 (数组)
1.数组的初始化 声明了数组后,就必须为数组分配内存,以保存数组的所有元素.数组是引用类型,所以必须给它分配堆上的内存,为此,应使用 new 运算符,指定数组中元素的类型和数量来初始化数组的变量.若使 ...
- rabbitmq 简单梳理
概念: 生产者(Producer,简写P),负责发布消息. “交换机”(Exchange, 简写X), 负责中转消息. 路由(Route, 简写R), 即 X->Q的路线名. 消息队列 (Que ...
- 【转】python编码的问题
摘要: 为了在源代码中支持非ASCII字符,必须在源文件的第一行或者第二行显示地指定编码格式: # coding=utf-8 或者是: #!/usr/bin/python # -*- coding: ...
- destoon公司搜索页面显示公司类型
首先找到前台模板文件:/template/default/company/search.htm 看到51行 {template 'list-company', 'tag'} 打开 /template/ ...
- user initialization list vs constructor assignment
[本文连接] http://www.cnblogs.com/hellogiser/p/user_initialization_list.html [分析] 初始化列表和构造函数内的赋值语句有何区别? ...
- 在react native用到的javascript 的一些关键知识(整理中)
发现了一个讲解javascript的好网站,分享一下,讲的非常棒! 注意,这些文章都可以选择中文进行阅读! 下面这个连接是关于prototype的: https://developer.mozilla ...
- Maven下载依赖项的源代码(source code)和Javadoc
Maven 默认只下载依赖项本身的 jar 文件,不下载源代码和 Javadoc.如此固然工程的体积是最小的,但在开发者不熟悉依赖的对象时,需要查找源代码中的方法定义和说明. 这时我们需要使用一条 M ...
- Scrapy003-项目流程
Scrapy003-项目流程 @(Spider)[POSTS] 前两篇文章我们了解到Scrapy的原理和安装的相关知识,这节就需要知道创建项目流程的小知识. 根据官方文档:http://scrapy- ...