javascript面向?qū)ο蟪绦蛟O(shè)計(jì)高級特性經(jīng)典教程(值得收藏)
本文實(shí)例講述了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)的高級特性。分享給大家供大家參考,具體如下:
1.創(chuàng)建對象的三種方式:
第一種構(gòu)造法:new Object
var a = new Object(); a.x = 1, a.y = 2;
第二種構(gòu)造法:對象直接量
var b = { x : 1, y : 2 };
第三種構(gòu)造法:定義類型
function Point(x, y){ this.x = x; this.y = y; } var p = new Point(1,2);
2.訪問對象
訪問對象的屬性
中括號表示法:hero['name']。、
點(diǎn)號表示法:hero.name。
如果訪問的屬性不存在,會返回undefined。
訪問對象的方法
方法名后加一對括號:hero.say()。
像訪問屬性一個(gè)訪問方法:hero['say']()。
3.刪除屬性與方法
//創(chuàng)建一個(gè)空對象 var hero = {}; //為hero對象增加屬性和方法 hero.name = "JavaScript"; hero.value = "helloworld"; hero.sayName = function(){return "hello " + hero.name;}; //測試 alert(hero.name); //output javascript alert(hero.sayName()); //output hello javascript //刪除hero對象的name屬性 delete hero.name; //測試 alert(hero.sayName()); //output hello undefined
4.使用this值
//創(chuàng)建一個(gè)空對象 var hero = {}; //為hero對象增加屬性和方法 hero.name = "javascript"; hero.value = "helloworld"; hero.sayName = function(){return "hello " + this.name;}; //測試 alert(hero.name); //output javascript alert(hero.sayName()); //output hello javascript
總結(jié):
① 這里的this實(shí)際上引用的是“這個(gè)對象”或“當(dāng)前對象”。
② this的用法,大部分人的使用問題都比較多。所以不建議過多使用!
5.內(nèi)建對象
內(nèi)建對象大致上可以分為三個(gè)組:
① 數(shù)據(jù)封裝類對象 —— 包括Object、Array、Boolean、Number和String。這些對象代表著javascript中不同的數(shù)據(jù)類型,并且都擁有各自不同的typeof返回值,以及undefined和null狀態(tài)。
② 工具類對象 —— 包括Math、Date、RegExp等用于提供遍歷的對象。
③ 錯(cuò)誤類對象 —— 包括一般性錯(cuò)誤對象以及其他各種更特殊的錯(cuò)誤類對象。它們可以在某些異常發(fā)生時(shí)幫助我們糾正程序工作狀態(tài)。
6.Object對象
Object是javascript中所有對象的父級對象,這意味著所有對象都繼承于Object對象。
創(chuàng)建一個(gè)空對象:
var object = {}; var obj = new Object();
7.Array對象
Array對象用于在單個(gè)的變量中存儲多個(gè)值。
創(chuàng)建一個(gè)空Array對象:
var object = {}; var obj = new Array();
例如1:
//反轉(zhuǎn)字符串示例 //定義一個(gè)字符串 var str = "a,b,c,d,e,f,g"; //利用String對象的split()方法,將字符串切割成一個(gè)數(shù)組 var arr = str.split(","); //利用Array對象的reverse()方法,將數(shù)組中元素的順序顛倒。 arr = arr.reverse(); //測試打印 alert(arr.toString());
8.String對象
String對象與基本的字符串類型之間的區(qū)別:
var str = "hello"; var obj = new String("world"); alert(typeof str); //typeof string alert(typeof obj); //typeof object
例如1:
//判斷字符串是否包含指定字符串示例 //定義兩個(gè)要判斷的字符串 var str = "abcdefg"; var substr = "efg"; /* * 定義判斷字符串是否包含指定字符串的函數(shù) * * 第一個(gè)參數(shù):要判斷的字符串 * * 第二個(gè)參數(shù):指定的字符串 */ function sub(str,substr){ //將判斷的字符串定義成String對象 var string = new String(str); //截取判斷的字符串 var result = string.substr(string.indexOf(substr),substr.length); /* * 判斷截取后的字符串是否為空 * * 為空,說明不包含指定字符串 * * 不為空,說明包含指定字符串 */ if(result==substr){ return true; }else{ return false; } } alert(sub(str,substr));
9.原型(prototype)
函數(shù)本身也是一個(gè)包含了方法和屬性的對象。而現(xiàn)在我們要研究的就是函數(shù)對象的另一個(gè)屬性 —— prototype。
利用原型添加方法與屬性
利用自身屬性重寫原型屬性
擴(kuò)展內(nèi)建對象
利用原型添加方法與屬性
下面創(chuàng)建一個(gè)新的函數(shù)對象,并設(shè)置一些屬性和方法:
function Hero(name, color){ this.name = name; this.color = color; this.whatareyou = function(){ return "I am a " + this.color + " " + this.name; } } var hero = new Hero("javascript","red"); alert(hero.whatareyou()); //output I am a red javascript
為上面的Hero函數(shù)對象增加一些屬性和方法:
Hero.prototype.price = 100; Hero.prototype.rating = 3; Hero.prototype.getInfo = function(){ return "Rating: " + this.rating + " , Price: " + this.price; } alert(hero.getInfo()); //output Rating: 3 , Price: 100
上面的方式,也可以這樣去做:
Hero.prototype = { price : 100, rating : 3, getInfo : function(){ return "Rating: " + this.rating + " , Price: " + this.price; } };
利用自身屬性重寫原型屬性
如果對象的自身屬性與原型屬性同名該怎么辦呢?答案是對象自身屬性的優(yōu)先級高于原型屬性。
function Hero(){ this.name = "jscript"; } Hero.prototype.name = "javascript"; var hero = new Hero(); alert(hero.name); //output jscript delete hero.name; alert(hero.name); //output javascript
擴(kuò)展內(nèi)建對象
//為原型 Array對象增加一個(gè)判斷的函數(shù) Array.prototype.inArray = function(color){ for(var i = 0, len = this.length; i < len; i++){ if(this[i] === color){ return true; } } return false; } //定義一個(gè)Array對象 var a = ["red", "green", "blue"]; //測試 alert(a.inArray("red")); //true alert(a.inArray("yellow")); //false
10.繼承
如果兩個(gè)類都是同一個(gè)實(shí)例的類型,那么它們之間存在著某些關(guān)系,我們把同一個(gè)實(shí)例的類型之間的泛化關(guān)系稱為“繼承”。
繼承關(guān)系至少包含三層含義:
① 子類的實(shí)例可以共享父類的方法。
② 子類可以覆蓋父類的方法或擴(kuò)展新的方法。
③ 子類和父類都是子類實(shí)例的“類型”。
在javascript中,并不支持“繼承”。也就是說,javascript中沒有繼承的語法。從這個(gè)意義上來說,javascript并不是直接的面向?qū)ο笳Z言。
11.原型鏈
原型鏈?zhǔn)荅CMAScript標(biāo)準(zhǔn)制定的默認(rèn)繼承方式。
例如:
function A(){ this.name = "a"; this.toString = function(){return this.name}; } function B(){ this.name = "b"; } function C(){ this.name = "c"; this.age = 18; this.getAge = function(){return this.age}; } B.prototype = new A(); C.prototype = new B();
解釋說明:
將對象直接創(chuàng)建在B對象的prototype屬性中,并沒有去擴(kuò)展這些對象的原有原型。
通過new A ( ) 另創(chuàng)建了一個(gè)新的實(shí)體,然后用它去覆蓋該對象的原型。
javascript是一種完全依靠對象的語言,其中沒有類(class)的概念。
因此,需要直接用new A ( ) 創(chuàng)建一個(gè)實(shí)體,然后才能通過該實(shí)體的屬性完成相關(guān)的繼承工作。
完成這樣的繼承實(shí)現(xiàn)之后,對 A ( ) 所進(jìn)行的任何修改、重寫或刪除,都不會對 B ( ) 產(chǎn)生影響。
只繼承于原型:
function A(){} A.prototype.name = "a"; A.prototype.toString = function(){return this.name}; function B(){} B.prototype = A.prototype; B.prototype.name = "b"; function C(){} C.prototype = B.prototype; C.prototype.name = "c"; C.prototype.age = 18; C.prototype.getAge = function(){return this.age};
對象之間的繼承(擴(kuò)展內(nèi)容,可以不會)(淺復(fù)制)
//該函數(shù)接受一個(gè)對象并返回它的副本 function extendCopy(p){ var z = {}; //定義一個(gè)空的對象z for(var i in p){ //var i =0 ; i < p.length ; i++ z[i] = p[i]; //都當(dāng)做數(shù)組處理的話,可以理解 } //uber屬性:將p作為z的父級,將z指向p的原型 z.uber = p; return z; } //定義對象a,但是對象a不是函數(shù)對象 var a = { name : "a", toStr : function(){return this.name;} } //定義對象b,但是對象b不是函數(shù)對象 var b = extendCopy(a); b.name = "b"; b.toStr = function(){return this.uber.toStr() + " , " + this.name;}; //定義對象c,但是對象c不是函數(shù)對象 var c = extendCopy(b); c.name = 18; alert(c.toStr()); //output a , b , 18
PS:教程中不少代碼排版不太規(guī)范,小編這里推薦幾款本站javascript代碼格式化美化工具供大家使用:
JavaScript代碼格式化工具:
JavaScript代碼美化/壓縮/格式化/加密工具:
http://tools.jb51.net/code/jscompress
jsmin在線js壓縮工具:
http://tools.jb51.net/code/jsmincompress
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- Javascript基于對象三大特性(封裝性、繼承性、多態(tài)性)
- JavaScript實(shí)現(xiàn)多態(tài)和繼承的封裝操作示例
- JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài)示例
- JavaScript 繼承 封裝 多態(tài)實(shí)現(xiàn)及原理詳解
- Javascript 面向?qū)ο筇匦?/a>
- 利用javascript的面向?qū)ο蟮奶匦詫?shí)現(xiàn)限制試用期
- javascript 的面向?qū)ο筇匦詤⒖?/a>
- js面向?qū)ο笾?、私有、靜態(tài)屬性和方法詳解
- js面向?qū)ο笾R妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- javascript 面向?qū)ο缶幊袒A(chǔ) 多態(tài)
- JavaScript面向?qū)ο笾甈rototypes和繼承
- JavaScript面向?qū)ο笕齻€(gè)基本特征實(shí)例詳解【封裝、繼承與多態(tài)】
相關(guān)文章
使用遞歸遍歷對象獲得value值的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄褂眠f歸遍歷對象獲得value值的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積
這篇文章主要介紹了詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06詳解webpack與SPA實(shí)踐之開發(fā)環(huán)境搭建
這篇文章主要介紹了詳解webpack與SPA實(shí)踐之開發(fā)環(huán)境搭建,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12Bootstrap框架動態(tài)生成Web頁面文章內(nèi)目錄的方法
這篇文章主要介紹了Bootstrap框架動態(tài)生成Web頁面文章內(nèi)目錄的方法,利用Bootstrap中的Affix和ScrollSpy插件便可以實(shí)現(xiàn),需要的朋友可以參考下2016-05-05BootStrap中Datetimepicker和uploadify插件應(yīng)用實(shí)例小結(jié)
這篇文章主要介紹了BootStrap中Datetimepicker和uploadify插件應(yīng)用實(shí)例小結(jié)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05JavaScript將對象數(shù)組按字母順序排序的方法詳解
這篇文章主要介紹了JavaScript如何將對象數(shù)組按字母順序排序,本文介紹了三種解決方案,if條件語句 + sort(),localeCompare() + sort(),Collator() + sort(),有感興趣的同學(xué)可以跟著小編一起來看看2023-07-07javascript發(fā)送短信驗(yàn)證碼實(shí)現(xiàn)代碼
我們在注冊賬號,或者是參加活動時(shí),都會向手機(jī)發(fā)送收短信驗(yàn)證碼,短信驗(yàn)證碼到底是如何實(shí)現(xiàn)的,本文為大家揭曉,并為大家分項(xiàng)1javascript發(fā)送短信驗(yàn)證碼實(shí)現(xiàn)代碼,感興趣的小伙伴們可以參考一下2015-11-11