js之面向?qū)ο缶幊?/h1>
(1)構(gòu)造器和類

當(dāng)使用new運(yùn)算符調(diào)用一個(gè)函數(shù)的時(shí)候鼓鲁,它總是返回一個(gè)對(duì)象恳啥,在函數(shù)體內(nèi)部喷面,這個(gè)對(duì)象稱為this,即便在函數(shù)中不做任何特殊的事情星瘾,也會(huì)有this對(duì)象,如果不使用new調(diào)用惧辈,沒(méi)有一條顯式return語(yǔ)句的函數(shù)琳状,都會(huì)返回undefined


注意:在js中,與php一樣,當(dāng)沒(méi)有給構(gòu)造器函數(shù)傳遞參數(shù)時(shí)盒齿,圓括號(hào)是可選的念逞,因此

var son = new farther;

也是有效的

(2)返回對(duì)象(new 一個(gè)對(duì)象的過(guò)程)

當(dāng)使用new調(diào)用任何函數(shù)边翁,會(huì)發(fā)生

1在后臺(tái)自動(dòng)創(chuàng)建一個(gè)“空”的對(duì)象翎承,通過(guò)this引用(指向)該對(duì)象

var this = {};

2任意給this添加屬性

this.name = "weiwei";

3在函數(shù)的末尾,隱式的返回this對(duì)象

return this;


返回對(duì)象將會(huì)導(dǎo)致隱式的this失效符匾,數(shù)組也一樣叨咖,數(shù)組也是對(duì)象


function devil(){
            var skills = {
                kill:"fireball" //字符串用引號(hào)包裹
            };
            this.kill = "iceball";
            return skills;
        }
        var satan = new devil();  //不傳參可以不用加圓括號(hào)
        console.log(satan.kill); //fireball

js構(gòu)造函數(shù)顯式返回對(duì)象導(dǎo)致原型鏈丟失
返回的任何this以外的內(nèi)容,都將會(huì)導(dǎo)致instanceof運(yùn)算符和constructor屬性無(wú)法像預(yù)期那樣工作


function egg(){
            return {
                content:"yellow"
            };
        } 
        var hen = new egg();
        console.log(hen instanceof egg);  //false
        console.log(hen.constructor === egg);  //false
        console.log(hen.constructor === Object); // true
(3)遍歷對(duì)象屬性
var weiwei = {
            favo:"play basket",
            desc:"mild",
            high:170
        }
        for(item in weiwei){
            console.log(item + ":" + weiwei[item]);
        }

昨天做題竟然遺忘了item就是遍歷的鍵名啊胶,多練多練


(4)值完全相同的對(duì)象不相等

數(shù)組也是對(duì)象甸各,所以嘛

console.log([1,2,3] === [1,2,3]);  //false

值相同,引用不同的兩個(gè)數(shù)組(對(duì)象)焰坪,js對(duì)象比較引用趣倾,切記


(5)增強(qiáng)構(gòu)造器(防止遺漏new)
function hero(){
        if(!(this instanceof hero)){
                return new hero();
        }
        this.weapon = "gun";
        }
        var yuefei = new hero();
        var james = hero();
        console.log(yuefei.weapon);
        console.log(james.weapon);

this instanceof hero檢查新創(chuàng)建的this對(duì)象是否是由hero創(chuàng)建的,當(dāng)沒(méi)有使用new某饰,會(huì)指向全局對(duì)象


(6)函數(shù)有prototype屬性儒恋,對(duì)象沒(méi)有

constructor屬性可寫(xiě),因此不可靠


(7)當(dāng)屬性不是一個(gè)有效的標(biāo)識(shí)符的時(shí)候黔漂,方括號(hào)表示法是必需的
//girl.look-like-height = "isgood";      //錯(cuò)誤诫尽,不能用點(diǎn)
girl['look-like-good'] = "beauty";
console.log(girl['look-like-good']);
//console.log(girl['look-like-height']);

(8)js中的點(diǎn)號(hào)
var power = "air force";
var result = "hello".power;
console.log(result);   //undefiend

對(duì)字符串使用點(diǎn)操作符,會(huì)將字符串直接量轉(zhuǎn)換為對(duì)象炬守,就好像執(zhí)行了new String('hello'),但是沒(méi)有power屬性箱锐,所以返回undefined


(9)

構(gòu)造函數(shù)實(shí)例化一個(gè)對(duì)象,相當(dāng)于就只是提供了一個(gè)模板劳较,實(shí)例就繼承了構(gòu)造器上的屬性和方法驹止,然后就沒(méi)有構(gòu)造器的事了,就只有隱式原型__proto__來(lái)連接實(shí)例與構(gòu)造器的原型观蜗,也就是實(shí)例取代了構(gòu)造器
構(gòu)造器原型上方法里的this也指向新生成的實(shí)例臊恋,但是方法里嵌套函數(shù),會(huì)導(dǎo)致嵌套函數(shù)里的this指向全局墓捻,也就是window,(在方法里return函數(shù)與定義一個(gè)函數(shù)表達(dá)式抖仅,再調(diào)用一下有什么區(qū)別坊夫?)


(10)對(duì)象沒(méi)有prototype屬性
var haha = {};
haha.prototype.hi = "lalala";
console.log(haha.hi);  
(11)函數(shù)執(zhí)行環(huán)境導(dǎo)致的差異
var weapon = {
        weapon_type:"arrow",
        attack:function(){
            return console.log(this.weapon_type);
            //錯(cuò)誤:console.log(return this.weapon_type);
        }
    }
    var james = weapon.attack;
    james(); //undefined;

    var james = weapon.attack;
    james.call(weapon); //arrow

(12)實(shí)例化的對(duì)象都指向同一個(gè)構(gòu)造器原型
實(shí)例.PNG
(13)自由變量

當(dāng)前作用域沒(méi)有定義的變量
方法不僅可以添加在構(gòu)造器的prototype上,也可以直接添加在構(gòu)造器上
function Cat(){ this.eat = function(){} }

(14)原型實(shí)例---對(duì)html節(jié)點(diǎn)進(jìn)行賦值添加事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原型繼承實(shí)例</title>
</head>
<body>
    <div class="hotstone" id="hotstone">我要上傳說(shuō)撤卢,哈哈哈</div>

    <script>
    function getId(id){
        this.element = document.getElementById(id);
        //console.log(this.element);
    }
    getId.prototype.getInnerHtml =function(val){
        if(val){
            this.element.innerHTML = val;
            return this;   //為了進(jìn)行鏈?zhǔn)秸{(diào)用环凿,返回的是new出來(lái)的實(shí)例
        }else{
            return this.element.innerHTML;
        }
    }
    getId.prototype.on =function(type,fn){
        this.element.addEventListener(type,fn);
    }
    var hotstone = new getId('hotstone');
    console.log(hotstone.getInnerHtml('西蘭花偉大炮肯定會(huì)上傳說(shuō)'));
    console.log(hotstone.getInnerHtml());  //getInnerHtml方法傳值進(jìn)行修改,不傳值進(jìn)行獲取
    
    //因?yàn)間etInnerHtml()返回了this放吩,因此可以進(jìn)行鏈?zhǔn)秸{(diào)用
    hotstone.getInnerHtml('8月我一定會(huì)回來(lái)的智听,哈哈哈').on('click',function(){
        alert('我被點(diǎn)擊了,岸勺稀到推!');
    })
    </script>
</body>
</html>
(15)
image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市惕澎,隨后出現(xiàn)的幾起案子莉测,更是在濱河造成了極大的恐慌,老刑警劉巖唧喉,帶你破解...
    沈念sama閱讀 219,039評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件捣卤,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡八孝,警方通過(guò)查閱死者的電腦和手機(jī)董朝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)唆阿,“玉大人益涧,你說(shuō)我怎么就攤上這事锈锤⊙北睿” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,417評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵久免,是天一觀的道長(zhǎng)浅辙。 經(jīng)常有香客問(wèn)我,道長(zhǎng)阎姥,這世上最難降的妖魔是什么记舆? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,868評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮呼巴,結(jié)果婚禮上泽腮,老公的妹妹穿的比我還像新娘。我一直安慰自己衣赶,他們只是感情好诊赊,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著府瞄,像睡著了一般碧磅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,692評(píng)論 1 305
  • 那天鲸郊,我揣著相機(jī)與錄音丰榴,去河邊找鬼。 笑死秆撮,一個(gè)胖子當(dāng)著我的面吹牛四濒,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播像吻,決...
    沈念sama閱讀 40,416評(píng)論 3 419
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼峻黍,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了拨匆?” 一聲冷哼從身側(cè)響起姆涩,我...
    開(kāi)封第一講書(shū)人閱讀 39,326評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎惭每,沒(méi)想到半個(gè)月后骨饿,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,782評(píng)論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡台腥,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評(píng)論 3 337
  • 正文 我和宋清朗相戀三年宏赘,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片黎侈。...
    茶點(diǎn)故事閱讀 40,102評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡察署,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出峻汉,到底是詐尸還是另有隱情贴汪,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評(píng)論 5 346
  • 正文 年R本政府宣布休吠,位于F島的核電站扳埂,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏瘤礁。R本人自食惡果不足惜阳懂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望柜思。 院中可真熱鬧岩调,春花似錦、人聲如沸赡盘。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,996評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)亡脑。三九已至堕澄,卻和暖如春邀跃,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蛙紫。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,113評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工拍屑, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人坑傅。 一個(gè)月前我還...
    沈念sama閱讀 48,332評(píng)論 3 373
  • 正文 我出身青樓僵驰,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親唁毒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蒜茴,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容