this 相關(guān)
問題1： apply际乘、call 棒卷、bind有什么作用披粟，什么區(qū)別
apply()和call()方法都是在指定一個this值和參數(shù)的情況下調(diào)用某個函數(shù)赌髓。
bind()方法創(chuàng)建一個新的函數(shù), 當(dāng)被調(diào)用時从藤，它的this關(guān)鍵字被設(shè)置為提供的值 ，在調(diào)用新函數(shù)時春弥，提供任何一個給定的參數(shù)序列呛哟。
區(qū)別
- apply與call只有一個區(qū)別
- call()方法接受的是若干個參數(shù)的列表叠荠。
fun.call(thisArg[, arg1[, arg2[, ...]]]) - apply()方法接受的是一個包含多個參數(shù)的數(shù)組匿沛。
fun.apply(thisArg[, argsArray])
- call()方法接受的是若干個參數(shù)的列表叠荠。
- bind()與call和apply不同之處在于它返回一個函數(shù),
fun.bind(thisArg[, arg1[, arg2[, ...]]])
問題2： 以下代碼輸出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() //輸出john: hi! , 方法調(diào)用,this指向調(diào)用者
問題3： 下面代碼輸出什么，為什么
func() //輸出window, this是全局對象
function func() {
alert(this)
}
問題4：下面代碼輸出什么
document.addEventListener('click', function(e){
console.log(this); //輸出document, 在事件處理程序中this代表事件源DOM對象
setTimeout(function(){
//輸出window, setTimeout和setInterval執(zhí)行的函數(shù)this是全局對象
console.log(this);
}, 200);
}, false);
問題5：下面代碼輸出什么榛鼎，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john) //輸出John, call()的第一個參數(shù)指定了this為john對象
問題6： 以下代碼有什么問題逃呼，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //這里的this指$btn
this.showMsg(); //$btn上沒有showMsg()這個方法
})
},
showMsg: function(){
console.log('饑人谷');
}
}
// 修改后
var module= {
bind: function(){
var _this = this //這時this的值是module, 把值存入_this
$btn.on('click', function(){
console.log(this) //this為$btn
_this.showMsg(); //輸出饑人谷
})
},
showMsg: function(){
console.log('饑人谷');
}
}
原型鏈相關(guān)問題
問題7：有如下代碼，解釋Person者娱、 prototype抡笼、__proto__ 、p黄鳍、constructor之間的關(guān)聯(lián)推姻。
- Person是函數(shù)定義的類, 類（函數(shù)）自動獲得屬性prototype。
- p是Person的實例, 每個類的實例都會有一個內(nèi)部屬性__proto__ 框沟，指向類的prototype屬性
- prototype是構(gòu)造函數(shù)內(nèi)部的原型對象藏古，所以擁有contructor和__proto__ 屬性。constructor指向了構(gòu)造函數(shù)Person忍燥。
function Person(name){
this.name = name;
}
Person.prototype.sayName = function(){
console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();
問題8： 上例中拧晕，對對象 p可以這樣調(diào)用 p.toString()。toString是哪里來的? 畫出原型圖?并解釋什么是原型鏈梅垄。
當(dāng)調(diào)用p.tostring()時, 先會在p里找tostring方法, 找不到會沿著__proto__到 Person.prototype中找,還找不到就接著沿著__proto__找, 直到在object.prototype中找到為止
p.__proto__ ==> Person.prototype.__proto__ ==> object.prototype
在 javaScript 中厂捞，每個對象都有一個指向它的原型（prototype）對象的內(nèi)部鏈接。這個原型對象又有自己的原型队丝，直到某個對象的原型為 null 為止（也就是不再有原型指向）靡馁，組成這條鏈的最后一環(huán)。這種一級一級的鏈結(jié)構(gòu)就稱為原型鏈（prototype chain）机久。
問題9：對String做擴展臭墨，實現(xiàn)如下方式獲取字符串中頻率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現(xiàn)了5次
代碼:
String.prototype.getMostOften = function(){
var obj = {}
for(var i=0; i< this.length; i++){
if(obj[this.charAt(i)]){
obj[this.charAt(i)]++
}else if(!obj[this.charAt(i)]){
obj[this.charAt(i)] = 1
}
}
var max = 0,
val = ''
for(var key in obj){
if(obj[key] > max){
max = obj[key]
val = key
}
}
return val
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現(xiàn)了5次
問題10： instanceOf有什么作用？內(nèi)部邏輯是如何實現(xiàn)的吞加？
語法:object instanceof constructor
instanceof 運算符用來檢測 constructor.prototype 是否存在于參數(shù) object 的原型鏈上裙犹。即左側(cè)的對象是否是右側(cè)類的實例尽狠，如果是則表達式返回true；否則返回false叶圃。
內(nèi)部邏輯: 循環(huán)判斷 obj.__proto__.__proto__..... === con.prototype
繼承
問題11：繼承有什么作用?
繼承是指一個對象直接使用另一對象的屬性和方法袄膏。
優(yōu)點:
- 優(yōu)化代碼結(jié)構(gòu)和對象關(guān)系
- 優(yōu)化內(nèi)存空間, 一些共用的方法和屬性不用重復(fù)寫了. 子類需要添加或修改新的方法時, 可以重寫或擴展而不影響父類
問題12： 下面兩種寫法有什么區(qū)別?
方法2把printName寫到了原型鏈里, 節(jié)約了代碼量, 提高了性能, 而方法1寫在構(gòu)造函數(shù)中, 每創(chuàng)造一個實例都要運行一遍printName函數(shù).
//方法1
function People(name, sex){
this.name = name;
this.sex = sex;
this.printName = function(){
console.log(this.name);
}
}
var p1 = new People('饑人谷', 2)
//方法2
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
}
var p1 = new Person('若愚', 27);
問題13： Object.create 有什么作用？兼容性如何掺冠？
Object.create() 方法使用指定的原型對象和其屬性創(chuàng)建了一個新的對象沉馆。
child = Object.create(parent.prototype)
//使child.__proro__ = parent.prototype
問題14： hasOwnProperty有什么作用？ 如何使用德崭？
hasOwnPerperty是Object.prototype的一個方法斥黑，可以判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性
hasOwnProperty是JavaScript中唯一一個處理屬性但是不查找原型鏈的函數(shù)
obj.hasOwnProperty(prop)
//prop : 要檢查的屬性名
//obj: 要檢查的對象
//返回一個布爾值
問題15：如下代碼中call的作用是什么?
function Person(name, sex){
this.name = name;
this.sex = sex;
}
function Male(name, sex, age){
//運行構(gòu)造函數(shù)，把屬性賦值到自己內(nèi)部
Person.call(this, name, sex); //call主要是為了把環(huán)境改到自己的作用域內(nèi)
this.age = age;
}
問題16： 補全代碼眉厨，實現(xiàn)繼承
function Person(name, sex){
this.name = name
this.sex = sex
}
Person.prototype.getName = function(){
console.log(this.name)
};
function Male(name, sex, age){
Person.call(this, name, sex)
this.age = age
}
function inherit(superType, subType){
subType.prototype = Object.create(superType.prototype)
subType.prototype.constructor = subType
}
inherit(Person, Male)
Male.prototype.getAge = function(){
console.log(this.age)
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
