JavaScript面向对象入门教程

那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?

一般来说大家比较熟悉的面向对象方式是基于类的面向对象,声明一个类,然后在根据类声明的描述去创建对象,通过类与类之间的继承和组合关系来复用代码。大多数情况下,基于类的面向对象语言(C++,C#,Java之类的)都把类整合进自己的类型系统,即每个类(Class)同时也是一个变量类型(Variable Type),并允许子类类型的值被赋值给父类类型变量。

而JS的设计采用了一种完全不同的思路。首先JS的类型是不可扩展的(就是说,语言的使用者无法添加新的类型)这样就无法采用上述语言的做法。根据语言标准,JS设计了6种用户可以使用的数据类型(因为JS是弱类型的,所以变量没有类型,只有数据有类型):
Boolean Number String Null Undefined Object

为了实现面向对象,JS把所有的对象放到Object类型中,这样,JS就有6种用户可使用的数据类型。除了Undefined,JS为所有的类型提供了字面值(literal)语法,现在来看,JS的Object字面值表示设计的相当成功,现在甚至成为了一种数据交换的格式,这就是大家所熟悉的JSON。

现在开始写面向对象的JS(OO JS),如果你有什么问题或我遗漏了什么,在下面评论出告诉我。

Literal Notation
Literal Notation只是在JavaScript中创建对象的一种方法,是的,方法不止这一种。当你打算创建一个对象实例的时候Literal Notation是首选的方法。

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!' ); 

  } 

 };

很简洁漂亮是不是?访问属性和方法也一样很简单。

查看源代码打印帮助
1 bill.name; // "Bill E Goat" 

2 bill.sound(); // "bahhh"

如果属性名不是一个有效的标识符我们还可以这么访问它:

查看源代码打印帮助
1 bill['name']; // "Bill E Goat"
请注意当调用一个方法时我们要在方法名后面添加一对括号去调用它。让我们重写当前的sound方法并传给它一个参数来调用它:

 bill.sound = function(noise) { 

     console.log( noise); 

 }; 

 bill.sound("brrr!"); // "brrr!" He's cold <IMG class=wp-smiley alt=:) src="http://digdeeply.org/wp-includes/images/smilies/icon_smile.gif">

很好,我们传入了一个参数(noise),并且在方法的内部访问了它。下面我们继续添加一个方法来访问name属性:

 bill.sayName = function() { 

     console.log( "Hello " + this.name ); 

 }; 

 bill.sayName(); // "Hello Bill E Goat"

我们可以通过this.propertyName在一个方法内部访问属性

 bill.sayName; // function

这些代码会有什么结果。我们不使用括号调用sayName,它返回了一个方法定义。继续探索!

 var sound = bill.sound; 

 sound('moo!'); // "moo!"

我们把一个叫sound的本地方法赋值给一个对象sound,现在可以在sound后面添加括号并传入参数调用那个方法了。如果我们试着克隆Bill会有什么结果?

var sally = bill;
sally.name; // "Bill E Goat", But her name is Sally silly
sally.name = "Sally";
sally.name; // "Sally", Better
bill.name; // "Sally", Oh no what happened to Bill
在上面的例子中我们创建了一个新的变量sally,并让它和bill相等。现在sally和bill在内存中引用同样的对象。对一个对象的改变会影响到另一个。

下面再看另外一个例子:

bill.name = "Bill E Goat";
bill.sayName(); // "Hello Bill E Goat";
var sayName = bill.sayName;
sayName; // function, OK so far so good
sayName(); // "Hello ", huh why didn't it print out Bills name?

bill的name属性是一个本地变量,sayName方法是在全局范围内创建的,所以this.name会在全局范围内查找name的值。但问题是name没有定义。让我们来定义一个全局变量name看看会发生什么:

 var name = "Bearded Octo"; 

 sayName(); // "Hello Bearded Octo"

在这里我们创建了一个全局变量name,并赋值“Bearded Octo”。当我们调用sayName方法时它在全局范围内查找name并访问到了值“Bearded Octo”,很好。下面看看Constructor Notation。

Constructor Notation
Constructor Notation是另外一种写面向对象JavaScript的方法。当你需要为一个对象设置初始属性值和方法或者打算创建一个对象的不同实例但他们的属性和方法都是不同的,这时首选Constructor Notation方式。下面从创建一个空对象开始:

1 function 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 (typeof title !== 'undefined') {
 this.title = title;
} else {
 this.title = "";
}
// Is the same as
this.title = typeof title !== 'undefined' ? 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"

更高级一眯的

一、 生成对象的原始模式

假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。

var Cat = {

name : '',

color : ''

}

 

现在,我们需要根据这个原型对象的规格(schema),生成两个实例对象。

var cat1 = {}; // 创建一个空对象

cat1.name = "大毛"; // 按照原型对象的属性赋值

cat1.color = "黄色";

var cat2 = {};

cat2.name = "二毛";

cat2.color = "黑色";

 

好了,这就是最简单的封装了,把两个属性封装在一个对象里面。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么联系。

二、 原始模式的改进

我们可以写一个函数,解决代码重复的问题。

function Cat(name,color){

return {

name:name,

color:color

}

}

 

然后生成实例对象,就等于是在调用函数:

var cat1 = Cat("大毛","黄色");

var cat2 = Cat("二毛","黑色");

 

这种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。

三、 构造函数模式

为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。

所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

比如,猫的原型对象现在可以这样写,

function Cat(name,color){

this.name=name;

this.color=color;

}

 

我们现在就可以生成实例对象了。

var cat1 = new Cat("大毛","黄色");

var cat2 = new Cat("二毛","黑色");

alert(cat1.name); // 大毛

alert(cat1.color); // 黄色

 

这时cat1和cat2会自动含有一个constructor属性,指向它们的构造函数。

alert(cat1.constructor == Cat); //true

alert(cat2.constructor == Cat); //true

 

Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。

alert(cat1 instanceof Cat); //true

alert(cat2 instanceof Cat); //true

 

四、构造函数模式的问题

构造函数方法很好用,但是存在一个浪费内存的问题。

请看,我们现在为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠)。那么,原型对象Cat就变成了下面这样:

function Cat(name,color){

this.name = name;

this.color = color;

this.type = "猫科动物";

this.eat = function(){alert("吃老鼠");};

}

 

还是采用同样的方法,生成实例:

var cat1 = new Cat("大毛","黄色");

var cat2 = new Cat ("二毛","黑色");

alert(cat1.type); // 猫科动物

cat1.eat(); // 吃老鼠

 

表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。

alert(cat1.eat == cat2.eat); //false

 

能不能让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的。

五、 Prototype模式

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

function Cat(name,color){

this.name = name;

this.color = color;

}

Cat.prototype.type = "猫科动物";

Cat.prototype.eat = function(){alert("吃老鼠")};

 

然后,生成实例。

var cat1 = new Cat("大毛","黄色");

var cat2 = new Cat("二毛","黑色");

alert(cat1.type); // 猫科动物

cat1.eat(); // 吃老鼠

 

这时所有实例的type属性和eat()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。

alert(cat1.eat == cat2.eat); //true

 

六、 Prototype模式的验证方法

为了配合prototype属性,Javascript定义了一些辅助方法,帮助我们使用它。,

6.1 isPrototypeOf()

这个方法用来判断,某个proptotype对象和某个实例之间的关系。

alert(Cat.prototype.isPrototypeOf(cat1)); //true

alert(Cat.prototype.isPrototypeOf(cat2)); //true

 

6.2 hasOwnProperty()

每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。

alert(cat1.hasOwnProperty("name")); // true

alert(cat1.hasOwnProperty("type")); // false

 

6.3 in运算符

in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。

alert("name" in cat1); // true

alert("type" in cat1); // true

 

in运算符还可以用来遍历某个对象的所有属性。

for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

时间: 2024-09-13 22:16:01

JavaScript面向对象入门教程的相关文章

javascript search 入门教程

javascript search 入门教程 search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串. 语法 stringObject.search(regexp)参数 描述 regexp 该参数可以是需要在 stringObject 中检索的子串,也可以是需要检索的 RegExp 对象. 注释:要执行忽略大小写的检索,请追加标志 i.   返回值 stringObject 中第一个与 regexp 相匹配的子串的起始位置. 注释:如果没有找到任何匹配的子串,则

JavaScript面向对象程序设计教程_javascript技巧

JavaScript中对象的定义为:无序属性的集合,其属性可以包含基本值.对象或者函数.可以把对象想象成散列表,就是一组名值对(key:value),其中值可以是数据或函数,每个对象都是基于一个引用类型创建的. 理解对象 前面的博客里写过创建对象的方式有两种,一种是创建一个object的实例,另一种是使用对象字面量法: var person = new Object(); person.sex = man; person.name = bluce person.age = 58; person.

百度地图JavaScript开发入门教程

        自从openGPS.cn小编在2011年的一个WEB项目中用到了百度地图做售楼数量分布显示功能之后,就一发不可收拾,在位置服务的领域一路走了5年之久.今天难得时间充裕,给WEB开发者分享一点自己的经验,希望能够给到新接触百度地图JavaScript开发的朋友们一些帮助.         百度地图JavaScript开发第一步,得会看资料.很多新手,是因为连基本的页面怎么打开都不知道,重度依赖搜索引擎去搜出来百度地图开发官方站点,从而记不住操作过程,回头却找不到用过的页面,不会操作

JavaScript 面向对象入门精简篇第1/2页_js面向对象

封装 :javascript中创建对象的模式中,个人认为通过闭包才算的上是真正意义上的封装 ,所以首先我们先来简单介绍一下闭包,看下面这个例子: 复制代码 代码如下: <script type="text/javascript"> function myInfo(){ var name ="老鱼",age =27; var myInfo = "my name is" + name + "i am" + age +&

javascript面向对象入门基础详细介绍_js面向对象

什么是对象 简单点说,编程语言中的对象是对现实中事物的简化.例如,我们一个人就是一个对象,但是编程语言很难完全描述一个这样复杂的对象.所以我们必须做出简化,首先,将人简化成属性和行为的组合,然后仅仅保留对程序有意义的几个属性以及行为.例如,我们做一个统计某学校的人的身高的程序,那么我们在这个程序中就可以把人的行为省略掉,只保留行为,并且只保留身高这一个属性.这样,我们就得到了一个最简单的对象. JavaScript字符串对象 对象的属性 其实我们之前在HTML DOM中已经就是在使用对象了.例如

javascript面向对象程序设计高级特性经典教程(值得收藏)_javascript技巧

本文实例讲述了javascript面向对象程序设计的高级特性.分享给大家供大家参考,具体如下: 1.创建对象的三种方式: 第一种构造法:new  Object var a = new Object(); a.x = 1, a.y = 2; 第二种构造法:对象直接量 var b = { x : 1, y : 2 }; 第三种构造法:定义类型 function Point(x, y){ this.x = x; this.y = y; } var p = new Point(1,2); 2.访问对象

JavaScript面向对象之私有静态变量实例分析_javascript技巧

本文实例分析了JavaScript面向对象之私有静态变量.分享给大家供大家参考,具体如下: 大家知道,私有实例变量的原理是根据作用域. 私有实例变量是在Javascript的function内部用var关键字实现,只在function内部有效. 仿照这个,提出私有静态变量的解决方案: <script language="javascript" type="text/javascript"> var JSClass = (function() { var

javascript面向对象快速入门实例_javascript技巧

本文深入浅出的讲述了javascript面向对象快速入门实例.分享给大家供大家参考.具体如下: javascript面向对象入门案例: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function Cat(){//js中对象的定义与函数一样,不同点在于怎么样调用. } var cat1 = new Cat();//创建类实例 //js中类属性可以动态添加,并不需要写在原

JavaScript面向对象编程入门教程_基础知识

尽管面向对象JavaScript与其他语言相比之下存在差异,并由此引发了一些争论,但毋庸置疑,JavaScript具有强大的面向对象编程能力 本文先从介绍面向对象编程开始,然后回顾JavaScript对象模型,最后演示JavaScript中的面向对象编程概念. JavaScript回顾 如果你对诸如变量(variables).类型(types).函数(functions).以及作用域(scope)等JavaScript概念觉得心里没底,那么你可以阅读重新介绍JavaScript中的这些主题.你还