這篇文章主要介紹“JavaScript面向?qū)ο缶幊淘敿?xì)講解”，在日常操作中，相信很多人在JavaScript面向?qū)ο缶幊淘敿?xì)講解問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JavaScript面向?qū)ο缶幊淘敿?xì)講解”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
10年積累的成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有麻江免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
初探
我們知道Javascript中的變量定義基本如下：
var name = 'Chen Hao';; var email = 'haoel(@)hotmail.com'; var website = 'http://coolshell.cn';
如果要用對(duì)象來(lái)寫的話，就是下面這個(gè)樣子：
重慶分公司
重慶分公司
var chenhao = { name :'Chen Hao', email : 'haoel(@)hotmail.com', website : 'http://coolshell.cn' };于是，我就可以這樣訪問(wèn)：
//以成員的方式 chenhao.name; chenhao.email; chenhao.website; //以hash map的方式 chenhao["name"]; chenhao["email"]; chenhao["website"];
關(guān)于函數(shù)，我們知道Javascript的函數(shù)是這樣的：
var doSomething = function(){ alert('Hello World.'); };于是，我們可以這么干：
var sayHello = function(){ var hello = "Hello, I'm "+ this.name + ", my email is: " + this.email + ", my website is: " + this.website; alert(hello); }; //直接賦值，這里很像C/C++的函數(shù)指針 chenhao.Hello = sayHello; chenhao.Hello();相信這些東西都比較簡(jiǎn)單，大家都明白了。 可以看到j(luò)avascript對(duì)象函數(shù)是直接聲明，直接賦值，直接就用了。runtime的動(dòng)態(tài)語(yǔ)言。
還有一種比較規(guī)范的寫法是：
//我們可以看到， 其用function來(lái)做class。 var Person = function(name, email, website){ this.name = name; this.email = email; this.website = website; this.sayHello = function(){ var hello = "Hello, I'm "+ this.name + ", \n" + "my email is: " + this.email + ", \n" + "my website is: " + this.website; alert(hello); }; }; var chenhao = new Person("Chen Hao", "haoel@hotmail.com", "http://coolshell.cn"); chenhao.sayHello();順便說(shuō)一下，要?jiǎng)h除對(duì)象的屬性，很簡(jiǎn)單：
delete chenhao['email']
上面的這些例子，我們可以看到這樣幾點(diǎn)：
◆ Javascript的數(shù)據(jù)和成員封裝很簡(jiǎn)單。沒(méi)有類完全是對(duì)象操作。純動(dòng)態(tài)!
◆ Javascript function中的this指針很關(guān)鍵，如果沒(méi)有的話，那就是局部變量或局部函數(shù)。
◆ Javascript對(duì)象成員函數(shù)可以在使用時(shí)臨時(shí)聲明，并把一個(gè)全局函數(shù)直接賦過(guò)去就好了。
◆ Javascript的成員函數(shù)可以在實(shí)例上進(jìn)行修改，也就是說(shuō)不同實(shí)例相同函數(shù)名的行為不一定一樣。
屬性配置 – Object.defineProperty
先看下面的代碼：
//創(chuàng)建對(duì)象 var chenhao = Object.create(null); //設(shè)置一個(gè)屬性 Object.defineProperty( chenhao, 'name', { value: 'Chen Hao', writable: true, configurable: true, enumerable: true }); //設(shè)置多個(gè)屬性 Object.defineProperties( chenhao, { 'email' : { value: 'haoel@hotmail.com', writable: true, configurable: true, enumerable: true }, 'website': { value: 'http://coolshell.cn', writable: true, configurable: true, enumerable: true } } );下面就說(shuō)說(shuō)這些屬性配置是什么意思。
writable：這個(gè)屬性的值是否可以改。
configurable：這個(gè)屬性的配置是否可以改。
enumerable：這個(gè)屬性是否能在for…in循環(huán)中遍歷出來(lái)或在Object.keys中列舉出來(lái)。
value：屬性值。
get()/set(_value)：get和set訪問(wèn)器。
Get/Set 訪問(wèn)器
關(guān)于get/set訪問(wèn)器，它的意思就是用get/set來(lái)取代value(其不能和value一起使用)，示例如下：
var age = 0; Object.defineProperty( chenhao, 'age', { get: function() {return age+1;}, set: function(value) {age = value;} enumerable : true, configurable : true } ); chenhao.age = 100; //調(diào)用set alert(chenhao.age); //調(diào)用get 輸出101（get中+1了）;我們?cè)倏匆粋€(gè)更為實(shí)用的例子——利用已有的屬性(age)通過(guò)get和set構(gòu)造新的屬性(birth_year)：
Object.defineProperty( chenhao, 'birth_year', { get: function() { var d = new Date(); var y = d.getFullYear(); return ( y - this.age ); }, set: function(year) { var d = new Date(); var y = d.getFullYear(); this.age = y - year; } } ); alert(chenhao.birth_year); chenhao.birth_year = 2000; alert(chenhao.age);這樣做好像有點(diǎn)麻煩，你說(shuō)，我為什么不寫成下面這個(gè)樣子：
var chenhao = { name: "Chen Hao", email: "haoel@hotmail.com", website: "http://coolshell.cn", age: 100, get birth_year() { var d = new Date(); var y = d.getFullYear(); return ( y - this.age ); }, set birth_year(year) { var d = new Date(); var y = d.getFullYear(); this.age = y - year; } }; alert(chenhao.birth_year); chenhao.birth_year = 2000; alert(chenhao.age);是的，你的確可以這樣的，不過(guò)通過(guò)defineProperty()你可以干這些事：
1)設(shè)置如 writable，configurable，enumerable 等這類的屬性配置。
2)動(dòng)態(tài)地為一個(gè)對(duì)象加屬性。比如：一些HTML的DOM對(duì)像。
查看對(duì)象屬性配置
如果查看并管理對(duì)象的這些配置，下面有個(gè)程序可以輸出對(duì)象的屬性和配置等東西：
//列出對(duì)象的屬性. function listProperties(obj) { var newLine = "call，apply， bind 和 this
關(guān)于Javascript的this指針，和C++/Java很類似。 我們來(lái)看個(gè)示例：(這個(gè)示例很簡(jiǎn)單了，我就不多說(shuō)了)
function print(text){ document.write(this.value + ' - ' + text+ '
'); } var a = {value: 10, print : print}; var b = {value: 20, print : print}; print('hello');// this => global, output "undefined - hello" a.print('a');// this => a, output "10 - a" b.print('b'); // this => b, output "20 - b" a['print']('a'); // this => a, output "10 - a"我們?cè)賮?lái)看看call 和 apply，這兩個(gè)函數(shù)的差別就是參數(shù)的樣子不一樣，另一個(gè)就是性能不一樣，apply的性能要差很多。(關(guān)于性能，可到 JSPerf 上去跑跑看看)
print.call(a, 'a'); // this => a, output "10 - a" print.call(b, 'b'); // this => b, output "20 - b" print.apply(a, ['a']); // this => a, output "10 - a" print.apply(b, ['b']); // this => b, output "20 - b"
但是在bind后，this指針，可能會(huì)有不一樣，但是因?yàn)镴avascript是動(dòng)態(tài)的。如下面的示例
var p = print.bind(a); p('a'); // this => a, output "10 - a" p.call(b, 'b'); // this => a, output "10 - b" p.apply(b, ['b']); // this => a, output "10 - b"繼承 和 重載
通過(guò)上面的那些示例，我們可以通過(guò)Object.create()來(lái)實(shí)際繼承，請(qǐng)看下面的代碼，Student繼承于Object。
var Person = Object.create(null); Object.defineProperties ( Person, { 'name' : { value: 'Chen Hao'}, 'email' : { value : 'haoel@hotmail.com'}, 'website': { value: 'http://coolshell.cn'} } ); Person.sayHello = function () { var hello = "Hello, I am "+ this.name + ",
" + "my email is: " + this.email + ",
" + "my website is: " + this.website; document.write(hello + "
"); } var Student = Object.create(Person); Student.no = "1234567"; //學(xué)號(hào) Student.dept = "Computer Science"; //系 //使用Person的屬性 document.write(Student.name + ' ' + Student.email + ' ' + Student.website +'
'); //使用Person的方法 Student.sayHello(); //重載SayHello方法 Student.sayHello = function (person) { var hello = "
Hello, I am "+ this.name + ",
" + "my email is: " + this.email + ",
" + "my website is: " + this.website + ",
" + "my student no is: " + this. no + ",
" + "my departent is: " + this. dept; document.write(hello + '
'); } //再次調(diào)用 Student.sayHello(); //查看Student的屬性（只有 no 、 dept 和 重載了的sayHello） document.write('
' + Object.keys(Student) + '
');
通用上面這個(gè)示例，我們可以看到，Person里的屬性并沒(méi)有被真正復(fù)制到了Student中來(lái)，但是我們可以去存取。這是因?yàn)镴avascript用委托實(shí)現(xiàn)了這一機(jī)制。其實(shí)，這就是Prototype，Person是Student的Prototype。
當(dāng)我們的代碼需要一個(gè)屬性的時(shí)候，Javascript的引擎會(huì)先看當(dāng)前的這個(gè)對(duì)象中是否有這個(gè)屬性，如果沒(méi)有的話，就會(huì)查找他的Prototype對(duì)象是否有這個(gè)屬性，一直繼續(xù)下去，直到找到或是直到?jīng)]有Prototype對(duì)象。
為了證明這個(gè)事，我們可以使用Object.getPrototypeOf()來(lái)檢驗(yàn)一下：
Student.name = 'aaa'; //輸出 aaa document.write('' + Student.name + '
'); //輸出 Chen Hao document.write('' +Object.getPrototypeOf(Student).name + '
');于是，你還可以在子對(duì)象的函數(shù)里調(diào)用父對(duì)象的函數(shù)，就好像C++里的 Base::func() 一樣。于是，我們重載hello的方法就可以使用父類的代碼了，如下所示：
//新版的重載SayHello方法 Student.sayHello = function (person) { Object.getPrototypeOf(this).sayHello.call(this); var hello = "my student no is: " + this. no + ",
" + "my departent is: " + this. dept; document.write(hello + '
'); }這個(gè)很強(qiáng)大吧。
組合
上面的那個(gè)東西還不能滿足我們的要求，我們可能希望這些對(duì)象能真正的組合起來(lái)。為什么要組合?因?yàn)槲覀兌贾朗沁@是OO設(shè)計(jì)的最重要的東西。不過(guò)，這對(duì)于Javascript來(lái)并沒(méi)有支持得特別好，不好我們依然可以搞定個(gè)事。
首先，我們需要定義一個(gè)Composition的函數(shù)：(target是作用于是對(duì)象，source是源對(duì)象)，下面這個(gè)代碼還是很簡(jiǎn)單的，就是把source里的屬性一個(gè)一個(gè)拿出來(lái)然后定義到target中。
function Composition(target, source) { var desc = Object.getOwnPropertyDescriptor; var prop = Object.getOwnPropertyNames; var def_prop = Object.defineProperty; prop(source).forEach( function(key) { def_prop(target, key, desc(source, key)) } ) return target; }有了這個(gè)函數(shù)以后，我們就可以這來(lái)玩了：
//藝術(shù)家 var Artist = Object.create(null); Artist.sing = function() { return this.name + ' starts singing...'; } Artist.paint = function() { return this.name + ' starts painting...'; } //運(yùn)動(dòng)員 var Sporter = Object.create(null); Sporter.run = function() { return this.name + ' starts running...'; } Sporter.swim = function() { return this.name + ' starts swimming...'; } Composition(Person, Artist); document.write(Person.sing() + '
'); document.write(Person.paint() + '
'); Composition(Person, Sporter); document.write(Person.run() + '
'); document.write(Person.swim() + '
'); //看看 Person中有什么？（輸出：sayHello,sing,paint,swim,run） document.write('' + Object.keys(Person) + '
');
Prototype 和 繼承
我們先來(lái)說(shuō)說(shuō)Prototype。我們先看下面的例程，這個(gè)例程不需要解釋吧，很像C語(yǔ)言里的函數(shù)指針，在C語(yǔ)言里這樣的東西見得多了。
var plus = function(x,y){ document.write( x + ' + ' + y + ' = ' + (x+y) + '
'); return x + y; }; var minus = function(x,y){ document.write(x + ' - ' + y + ' = ' + (x-y) + '
'); return x - y; }; var operations = { '+': plus, '-': minus }; var calculate = function(x, y, operation){ return operations[operation](x, y); }; calculate(12, 4, '+'); calculate(24, 3, '-');那么，我們能不能把這些東西封裝起來(lái)呢，我們需要使用prototype?？聪旅娴氖纠?/p>
var Cal = function(x, y){ this.x = x; this.y = y; } Cal.prototype.operations = { '+': function(x, y) { return x+y;}, '-': function(x, y) { return x-y;} }; Cal.prototype.calculate = function(operation){ return this.operations[operation](this.x, this.y); }; var c = new Cal(4, 5); c.calculate('+'); c.calculate('-');這就是prototype的用法，prototype 是javascript這個(gè)語(yǔ)言中最重要的內(nèi)容。網(wǎng)上有太多的文章介始這個(gè)東西了。說(shuō)白了，prototype就是對(duì)一對(duì)象進(jìn)行擴(kuò)展，其特點(diǎn)在于通過(guò)“復(fù)制”一個(gè)已經(jīng)存在的實(shí)例來(lái)返回新的實(shí)例,而不是新建實(shí)例。被復(fù)制的實(shí)例就是我們所稱的“原型”，這個(gè)原型是可定制的(當(dāng)然，這里沒(méi)有真正的復(fù)制，實(shí)際只是委托)。上面的這個(gè)例子中，我們擴(kuò)展了實(shí)例Cal，讓其有了一個(gè)operations的屬性和一個(gè)calculate的方法。
這樣，我們可以通過(guò)這一特性來(lái)實(shí)現(xiàn)繼承。還記得我們最最前面的那個(gè)Person吧， 下面的示例是創(chuàng)建一個(gè)Student來(lái)繼承Person。
function Person(name, email, website){ this.name = name; this.email = email; this.website = website; }; Person.prototype.sayHello = function(){ var hello = "Hello, I am "+ this.name + ",
" + "my email is: " + this.email + ",
" + "my website is: " + this.website; return hello; }; function Student(name, email, website, no, dept){ var proto = Object.getPrototypeOf; proto(Student.prototype).constructor.call(this, name, email, website); this.no = no; this.dept = dept; } // 繼承prototype Student.prototype = Object.create(Person.prototype); //重置構(gòu)造函數(shù) Student.prototype.constructor = Student; //重載sayHello() Student.prototype.sayHello = function(){ var proto = Object.getPrototypeOf; var hello = proto(Student.prototype).sayHello.call(this) + '
'; hello += "my student no is: " + this. no + ",
" + "my departent is: " + this. dept; return hello; }; var me = new Student( "Chen Hao", "haoel@hotmail.com", "http://coolshell.cn", "12345678", "Computer Science" ); document.write(me.sayHello());兼容性
上面的這些代碼并不一定能在所有的瀏覽器下都能運(yùn)行，因?yàn)樯厦孢@些代碼遵循 ECMAScript 5 的規(guī)范，關(guān)于ECMAScript 5 的瀏覽器兼容列表，你可以看這里“ES5瀏覽器兼容表”。
本文中的所有代碼都在Chrome***版中測(cè)試過(guò)了。
下面是一些函數(shù)，可以用在不兼容ES5的瀏覽器中：
Object.create()函數(shù)
function clone(proto) { function Dummy() { } Dummy.prototype = proto; Dummy.prototype.constructor = Dummy; return new Dummy(); //等價(jià)于Object.create(Person); } var me = clone(Person);defineProperty()函數(shù)
function defineProperty(target, key, descriptor) { if (descriptor.value){ target[key] = descriptor.value; }else { descriptor.get && target.__defineGetter__(key, descriptor.get); descriptor.set && target.__defineSetter__(key, descriptor.set); } return target }keys()函數(shù)
function keys(object) { var result, key result = []; for (key in object){ if (object.hasOwnProperty(key)) result.push(key) } return result; }Object.getPrototypeOf() 函數(shù)
function proto(object) { return !object? null : '__proto__' in object? object.__proto__ : /* not exposed? */ object.constructor.prototype }bind 函數(shù)
var slice = [].slice function bind(fn, bound_this) { var bound_args bound_args = slice.call(arguments, 2) return function() { var args args = bound_args.concat(slice.call(arguments)) return fn.apply(bound_this, args) } }到此，關(guān)于“JavaScript面向?qū)ο缶幊淘敿?xì)講解”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
