js面向对象菜鸟教程

这篇文章主要为大家详细介绍了js面向对象菜鸟教程，具有一定的参考价值，可以用来参考一下。

本指南可以很快让你学会写优美的面向对象JavaScript代码，我保证！学会写简洁的JavaScript代码对一个开发者的发展很重要，随着像Node.js这类技术的出现，你现在可以在服务器端写JavaScript代码了，你甚至可以用JavaScript来查询像MongoDB这样的持久性数据存储。

 // @arrange (512.笔记) www.q1010.com
var bill = {};

上面的代码没太大用处，仅仅只是创建了一个空对象。让我们动态的添加一些属性和方法到这个对象。

 // @arrange (512.笔记) www.q1010.com
bill.name = "Bill E Goat";
bill.sound = function() {
console.log( 'bahhh!' );
};

这里我们添加了“name”属性并赋值为“Bill E Goat”。我们不一定要在前面创建空对象，还可以只用一步完成上面所有的事。

// @arrange (512.笔记) www.q1010.com
var bill = {
name: "Bill E Goat", sound: function() { console.log( 'bahhh!' ); }
};

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

 // @arrange (512.笔记) www.q1010.com
bill.name; // "Bill E Goat"
bill.sound(); // "bahhh"

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

 // @arrange (512.笔记) www.q1010.com
bill['name']; // "Bill E Goat"

请注意当调用一个方法时我们要在方法名后面添加一对括号去调用它。让我们重写当前的sound方法并传给它一个参数来调用它：

 // @arrange (512.笔记) www.q1010.com
bill.sound = function(noise) {
console.log( noise);
};
bill.sound("brrr!"); // "brrr!" He's cold :)

打招呼：

 // @arrange (512.笔记) www.q1010.com
bill.sayName = function() {
console.log( "Hello " + this.name );
};
bill.sayName(); // "Hello Bill E Goat"

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

 // @arrange (512.笔记) www.q1010.com
bill.sayName; // function

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

 // @arrange (512.笔记) www.q1010.com
var sound = bill.sound;
sound('moo!'); // "moo!"

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

 // @arrange (512.笔记) www.q1010.com
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在内存中引用同样的对象。对一个对象的改变会影响到另一个。下面再看另外一个例子：

 // @arrange (512.笔记) www.q1010.com
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看看会发生什么：

 // @arrange (512.笔记) www.q1010.com
var name = "Bearded Octo";
sayName(); // "Hello Bearded Octo"

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

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

 // @arrange (512.笔记) www.q1010.com
function Game() {};

请注意习惯上第一个字母大写来表示它是一个类。我们来用这个类创建新的对象：

 // @arrange (512.笔记) www.q1010.com
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"

我们的对象现在有自己的属性了！当创建对象时，我们可以在属性中传值进去，或者在后面修改。

 // @arrange (512.笔记) www.q1010.com
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语句块写到一行的方法。他等价于下面的：

 // @arrange (512.笔记) www.q1010.com
if (typeof title !== 'undefined') {
this.title = title;
} else {
this.title = "";
}
// Is the same as
this.title = typeof title !== 'undefined' ? title : "";

如果这个对象创建的时候传入了title参数，对象的title属性就会被设置。如果没有传入，会被设置成默认值。我们可以创建一个方法来访问这个属性：

 // @arrange (512.笔记) www.q1010.com
zelda.loveTitle = function() {
console.log( "I love " + this.title );
};
zelda.loveTitle(); // "I love Ocarina of Time"

那样看起来很整齐，但是还可以更好。我们可以给Game类添加一个方法让所有从Game类创建的对象都有这个方法：Game类添加一个方法让所有从Game类创建的对象都有这个方法：

 // @arrange (512.笔记) www.q1010.com
Game.prototype.heartIt = function() {
console.log( "I heart " + this.title );
};
zelda.heartIt(); // "I heart Ocarina of Time"
smb.heartIt(); // "I heart Super Mario Brothers"

结束，顺便说一句：这种短小精悍的国外优秀教材最喜欢了~

本文来自：http://www.q1010.com/174/2075-0.html

注：关于js面向对象菜鸟教程的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：面向对象