您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)如何進行關(guān)于js中this、原型與閉包的深入理解,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
1、this關(guān)鍵字
a、有對象指向?qū)ο螅?/p>
b、沒對象指向全局變量(window);
c、有new指向new出的新對象;
d、bind,call&apply改變this的指向;
e、setTimeout/setInterval this指向window;
f、箭頭函數(shù) this 是由函數(shù)定義時候確定的;
var adder = { base : 1, add : function(a) { var f = v => v + this.base; return f(a); }, addThruCall: function inFun(a) { var f = v => v + this.base; var b = { base : 2 }; return f.call(b, a); }};
var obj = { i: 10, b: () => console.log(this.i, this), c: function() { console.log( this.i, this) }}obj.b(); // undefined window{...}原型obj.c(); // 10 Object {...}
2、原型
prototype:
prototype:每一個對象都會在其內(nèi)部初始化一個屬性:即prototype;
原型鏈:當(dāng)我們訪問一個對象的屬性時,如果這個對象內(nèi)部不存在這個屬性,那么就回去__proto__
里找這個屬性,這樣一直找下去就是:原型鏈;
instanceof
原理是判斷實例對象的__proto__和生成該實例的構(gòu)造函數(shù)的prototype是不是引用的同一個地址。
hasOwnProperty
是 JavaScript 中唯一一個處理屬性但是不查找原型鏈的函數(shù)。
構(gòu)造函數(shù) ->prototype-> 原型對象 -> constructor -> 構(gòu)造函數(shù)
構(gòu)造函數(shù) -> new -> 實例對象
實例對象 -> __proto__-> 原型對象-> __proto__->原型對象->->null
執(zhí)行上下文:
變量聲明與函數(shù)聲明,其作用域會提升到方法體的頂部;
作用域:
a、javascript沒有塊級作用域
b、javascript除了全局作用域之外,只有函數(shù)可以創(chuàng)建的作用域。作用域在函數(shù)定義時就已經(jīng)確定了。而不是在函數(shù)調(diào)用時確定。
閉包:
概念: 內(nèi)部函數(shù)可以訪問外部函數(shù)中的變量;
使用:函數(shù)作為返回值;函數(shù)作為參數(shù);
作用:封裝變量,收斂權(quán)限;
缺點:消耗內(nèi)存
創(chuàng)建對象的方法:
對象字面量;
構(gòu)造函數(shù);
立即執(zhí)行函數(shù);
Object.create();
new 對象過程:
創(chuàng)建新對象;
this指向這個新對象;
執(zhí)行代碼;
返回this;
類與繼承:
類的聲明:
function Animal(){ this.name = 'name';} // es6 class Animal2{ constructor(){ this.name = 'name2'; }}
繼承:
1.借助構(gòu)造函數(shù)實現(xiàn)繼承
function Parent(){ this.name = 'parent';} function Child(){ Parent.call(this); this.type = 'child1';}
缺點:
部分繼承;
繼承不到父類原型對象上的方法;(只有父類的屬性掛載到子類上了,Child的prototype沒變?yōu)镃hild.prototype繼承不了Parent的prototype)
2.原型鏈繼
function Parent(){ this.name = 'name';}function Child(){ this.type = 'child';} Child.prototype = new Parent();
缺點:原型鏈上原型對象是共用的。(原型的屬性修改,所有繼承自該原型的類的屬性都會一起改變)
3.組合方式
function Parent(){ this.name = 'parent';}function Child(){ Parent.call(this); this.type = 'child';}Child.prototype = new Parent();
缺點:
父類執(zhí)行函數(shù)執(zhí)行兩次;
constructor指向父類;
function Parent(){ this.name = 'parent';}function Child(){ Parent.call(this); this.type = 'child';}Child.prototype = Parent.prototype;
缺點:
子類constructor指向父類
function Parent(){ this.name = 'parent';}function Child(){ Parent.call(this); this.type = 'child';}Child.prototype = Object.create(Parent.prototype);Child.prototype.constructor = Child;
優(yōu)點:
子類的原型指向Object.create(Parent.prototype),實現(xiàn)了子類和父類構(gòu)造函數(shù)的分離,但是這時子類中還是沒有自己的構(gòu)造函數(shù),
所以緊接著又設(shè)置了子類的構(gòu)造函數(shù),由此實現(xiàn)了完美的組合繼承。(也就是把父類的prototype寫入子類的prototype,在定義子類的constructor)
4. es6
class Child extends Parent { constructor(){ }}
看完上述內(nèi)容,你們對如何進行關(guān)于js中this、原型與閉包的深入理解有進一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。