apply、call 坦辟、bind有什么作用刊侯,什么區(qū)別
-
apply()
在使用一個(gè)指定 this 值和參數(shù)(參數(shù)以數(shù)組或類數(shù)組對(duì)象的形式存在)的情況下調(diào)用某個(gè)函數(shù)的方法。fun.apply(thisArg[, argsArray])(只接受兩個(gè)參數(shù)) -
call()
:在使用一個(gè)指定的this值和若干個(gè)指定的參數(shù)值的前提下調(diào)用某個(gè)函數(shù)或方法锉走。fun.call(thisArg[, arg1[, arg2[, ...]]])(接受的參數(shù)個(gè)數(shù)沒(méi)有上限) -
bind()
方法創(chuàng)建一個(gè)新的函數(shù), 當(dāng)被調(diào)用時(shí)藕届,將其this關(guān)鍵字設(shè)置為提供的值,在調(diào)用新函數(shù)時(shí)亭饵,在任何提供之前提供一個(gè)給定的參數(shù)序列休偶。
區(qū)別:
call()
方法接受的是若干個(gè)參數(shù)的列表辜羊,而apply()
方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組踏兜。
以下代碼輸出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() // 彈出 john hi!
下面代碼輸出什么,為什么
func()
function func() {
alert(this) // 彈出window
}
因?yàn)榧钭保诤瘮?shù)內(nèi)被直接調(diào)用時(shí)this綁定到全局對(duì)象,window 就是該全局對(duì)象
下面代碼輸出什么
document.addEventListener('click', function(e){
console.log(this); // #document
setTimeout(function(){
console.log(this); // window
}, 200);
}, false);
下面代碼輸出什么昔驱,why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john) // call()調(diào)用一個(gè)函數(shù)疹尾,傳入函數(shù)執(zhí)行上下文及參數(shù), 彈出John
以下代碼有什么問(wèn)題骤肛,如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么,
this.showMsg();
})
},
showMsg: function(){
console.log('饑人谷');
}
}
this指的是$btn,而$btn沒(méi)有函數(shù)執(zhí)行
修改:
var module= {
var _this = this; // 將this指向module的值賦值給_this給下面調(diào)用纳本。
bind: function(){
$btn.on('click', function(){
_this.showMsg();
})
},
showMsg: function(){
console.log('饑人谷');
}
}
原型鏈相關(guān)問(wèn)題
有如下代碼,解釋Person腋颠、 prototype、proto淑玫、p朴艰、constructor之間的關(guān)聯(lián)。
function Person(name){
this.name = name;
}
Person.prototype.sayName = function(){
console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();
1、Preson是構(gòu)造函數(shù)侮穿,也是一個(gè)對(duì)象歌径。
2、p為Person的實(shí)例亲茅,擁有Person原型鏈上的屬性和方法
3、p.__proto__
指向Person.prototype
4克锣、Person.prototype.constructor
指向Person
上例中茵肃,對(duì)對(duì)象 p可以這樣調(diào)用 p.toString()。toString是哪里來(lái)的? 畫出原型圖?并解釋什么是原型鏈袭祟。
可以從原型圖中看出
toString
是Object.prototype的方法,p先通過(guò)p.__proto__
找Person.prototype中的方法巾乳,然而沒(méi)找到您没。然后接著p.proto.proto就找到了toString
。
對(duì)String做擴(kuò)展氨鹏,實(shí)現(xiàn)如下方式獲取字符串中頻率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因?yàn)閐 出現(xiàn)了5次
實(shí)現(xiàn)方式:
String prototype.getMostOften = function(){
var obj = {};
for(var i = 0; i< this.length; i++){
var n = this[i];
if(obj[n]){
obj[n]++
}else {
obj[n] = 1
}
}
var max = 0,
key;
for(var n in obj){
if(obj[n]>max){
max = obj[n];
key = n;
}
}
return key;
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch);
instanceOf有什么作用欧募??jī)?nèi)部邏輯是如何實(shí)現(xiàn)的?
instanceof 用來(lái)檢查對(duì)象是否是構(gòu)造函數(shù)的實(shí)例仆抵。
內(nèi)部邏輯是判斷從原型鏈底端向上判斷原型鏈上的對(duì)象是否是否是該構(gòu)造函數(shù)的原型對(duì)象
function isInstanceOf(obj, fn){
var oldpro = obj.__proto__;
do{
if(oldpro === fn.prototype){
return true;
}
else {
oldpro = oldpro.__proto__;
}
}while(oldpro)
return false;
}
繼承相關(guān)問(wèn)題
繼承有什么作用?
繼承是指一個(gè)對(duì)象直接使用另一對(duì)象的屬性和方法。
作用:
- 子類擁有父類的屬性和方法镣丑,不需要重復(fù)寫代碼舔糖,修改時(shí)也只需修改一份代碼
- 可以重寫和擴(kuò)展父類的屬性和代碼,又不影響父類本身
下面兩種寫法有什么區(qū)別?
從上兩圖可以看出:
方法一的寫法是屬性方法都寫入p1中剩盒;
方法二中的p1只有屬性
name
和sex
,方法綁定在Person.prototype
屬性下慨蛙,p1可以繼承父類的屬性和方法。這樣做的好處是節(jié)約代碼量期贫,提高性能跟匆。
Object.create 有什么作用?兼容性如何通砍?
Object.create()
方法會(huì)使用指定的原型對(duì)象及其屬性去創(chuàng)建一個(gè)新的對(duì)象。創(chuàng)建一個(gè)具有指定原型且可選擇性地包含指定屬性的對(duì)象封孙。
Object.create(proto[, propertiesObject])
Object.create()
實(shí)現(xiàn)類式繼承
hasOwnProperty有什么作用迹冤? 如何使用?
hasOwnPerperty
是Object.prototype的一個(gè)方法泡徙,可以判斷一個(gè)對(duì)象是否包含自定義屬性而不是原型鏈上的屬性,hasOwnProperty
是JavaScript中唯一一個(gè)處理屬性但是不查找原型鏈的函數(shù)
1膜蠢、m.hasOwnProperty('name'); // true
2堪藐、m.hasOwnProperty('printName'); // false
3、Male.prototype.hasOwnProperty('printAge'); // true
如下代碼中call的作用是什么?
function Person(name, sex){
this.name = name;
this.sex = sex;
}
function Male(name, sex, age){
Person.call(this, name, sex); //這里的 call 有什么作用
this.age = age;
}
call
可以指定函數(shù)的this 礁竞,所以這里的call
指定Person中的this為Male。從而讓函數(shù)Male可以調(diào)用Person的屬性杉辙。
補(bǔ)全代碼模捂,實(shí)現(xiàn)繼承
function Person(name, sex){
// todo ...
}
Person.prototype.printName = function(){
// todo ...
};
function Male(name, sex, age){
//todo ...
}
//todo ...
Male.prototype.getAge = function(){
//todo ...
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();