js面向对象菜鸟教程

内容摘要

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

本指南可以很快让你学会写优美的面向对象JavaScript代码，我保证！学会写简洁的JavaSc

文章正文

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

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


 // @arrange （www.idcnote.com）
var bill = {};

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


 // @arrange （www.idcnote.com）
bill.name = "Bill E Goat";
bill.sound = function() {
console.log( 'bahhh!' );
};

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


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

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


 // @arrange （www.idcnote.com）
bill.name; // "Bill E Goat"
bill.sound(); // "bahhh"

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


 // @arrange （www.idcnote.com）
bill['name']; // "Bill E Goat"

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


 // @arrange （www.idcnote.com）
bill.sound = function(noise) {
console.log( noise);
};
bill.sound("brrr!"); // "brrr!" He's cold :)

打招呼：


 // @arrange （www.idcnote.com）
bill.sayName = function() {
console.log( "Hello " + this.name );
};
bill.sayName(); // "Hello Bill E Goat"

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


 // @arrange （www.idcnote.com）
bill.sayName; // function

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


 // @arrange （www.idcnote.com）
var sound = bill.sound;
sound('moo!'); // "moo!"

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


 // @arrange （www.idcnote.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 （www.idcnote.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 （www.idcnote.com）
var name = "Bearded Octo";
sayName(); // "Hello Bearded Octo"

在这里我们创建了一个全局变量name，并赋值“Bearded Octo”。当我们调用sayName方法时它在全局范围内查找name并访问到了值“Bearded Octo”，很好。下面看看Constructor Notation。Constructor Notation是另外一种写面向对象JavaScript的方法。当你需要为一个对象设置初始属性值和方法或者打算创建一个对象的不同实例但他们的属性和方法都是不同的，这时首选 Constructor Notation方式。下面从创建一个空对象开始：


 // @arrange （www.idcnote.com）
function Game() {};

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


 // @arrange （www.idcnote.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 （www.idcnote.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 （www.idcnote.com）
if (typeof title !== 'undefined') {
this.title = title;
} else {
this.title = "";
}
// Is the same as
this.title = typeof title !== 'undefined' ? title : "";

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


 // @arrange （www.idcnote.com）
zelda.loveTitle = function() {
console.log( "I love " + this.title );
};
zelda.loveTitle(); // "I love Ocarina of Time"

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


 // @arrange （www.idcnote.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"

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

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

代码注释

上一篇 jQuery判断一个元素是否显示的解决办法下一篇 JS产生随机字符串的解决办法

作者：喵哥笔记

学的不仅是技术，更是梦想！