this 相關問題
問題1： apply、call 、bind有什么作用，什么區別
- call apply，調用一個函數，傳入函數執行上下文及參數,第一個參數都是希望設置的this對象,不同之處在于call方法接收參數列表，而apply接收參數數組
fn.call(context, param1, param2...)
fn.apply(context, paramArray)
- bind,Function.prototype.bind()方法返回一個新函數，并將傳入的第一個參數作為函數內部的this
var fn1 = obj.fn.bind(obj1) //this從obj變為obj1
問題2： 以下代碼輸出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() //john:hi!
問題3： 下面代碼輸出什么，為什么
func() //this是由調用的方式決定的,這是函數調用，this指向全局的window
function func() {
alert(this)
}
問題4：下面代碼輸出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
//輸出document,window
問題5：下面代碼輸出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john) //john,這是方法調用,this指向call()傳入的第一個參數
問題6： 以下代碼有什么問題，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么,this指的是事件觸發的對象即"$btn"
this.showMsg();
})
},
showMsg: function(){
console.log('饑人谷');
}
}
//修改
var module= {
bind: function(){
var _this =this
$btn.on('click', function(){
console.log(this) //this指什么
_this.showMsg();
})
},
showMsg: function(){
console.log('饑人谷');
}
}
原型鏈相關問題
問題7：有如下代碼，解釋Person、 prototype、proto、p、constructor之間的關聯。
function Person(name){
this.name = name;
}
Person.prototype.sayName = function(){
console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();
//Person為構造函數，p為該構造函數的一個實例
p.__proto__ === Person.prototype
p.__proto__ .constructor === Person.prototype.constructor === Person
Person.prototype.__proto__ === Object.prototype
Person.__proto__ === Function.prototype
問題8： 上例中，對對象 p可以這樣調用 p.toString()。toString是哪里來的? 畫出原型圖?并解釋什么是原型鏈
image.png
當p調用toString時，先在自己的屬性里面找，沒找到；然后進入Person.prototype里面找，沒找到;然后再到Object.prototype里面找，最后找到了
- 原型鏈：每個對象都有一個指向它的原型（prototype）對象的內部鏈接。這個原型對象又有自己的原型，直到某個對象的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最后一環。這種一級一級的鏈結構就稱為原型鏈（prototype chain）
問題9：對String做擴展，實現如下方式獲取字符串中頻率最高的字符
String.prototype.getMostOften =function(){
var obj = {}
var mostStr = {
str: '',
count: 0
}
for(var i =0;i<this.length;i++){
if(obj[this[i]]){
obj[this[i]]++
}
else{
obj[this[i]] = 1
}
if(obj[this[i]] > mostStr.count){
mostStr.str = this[i]
mostStr.count = obj[this[i]]
}
}
return mostStr
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch);
問題10： instanceOf有什么作用？內部邏輯是如何實現的？
作用是判斷一個對象是不是由一個構造函數創建的
內部邏輯：順著對象的原型連一直往上找,若原型鏈上的某一個proto指向了構造函數的prototype則返回true，找完了原型鏈也找不到則返回false。
繼承問題
問題11：繼承有什么作用?
繼承是面向對象的核心，能夠更有效的組織代碼與邏輯，繼承可以減少重復的代碼，把公用的方法屬性放在父類，子類可以直接使用，并且子類也可以很方便擴展添加新的方法或者屬性，不會影響到父類。提高復用，減少代碼冗余
問題12： 下面兩種寫法有什么區別?
//方法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);
- 方法1：每次實例化一個對象時都要創建一個printName方法，很浪費資源
- 方法2：將printName放在原型對象上，只需創建一次，所有的實例都可以調用該方法，通過原型鏈訪問
問題13： Object.create 有什么作用？兼容性如何？
Male.prototype = Object.create(Person.prototype);
通過Object.create clone了一個新的prototype而不是直接把Person.prtotype直接賦值，因為引用關系，這樣會導致后續修改子類的prototype也修改了父類的prototype，因為修改的是一個值
兼容性：Object.create是ES5方法，IE9及以上支持, 兼容性良好
問題14： hasOwnProperty有什么作用？ 如何使用？
hasOwnPerperty是Object.prototype的一個方法，可以判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性，hasOwnProperty是JavaScript中唯一一個處理屬性但是不查找原型鏈的函數
function Person(){
this.name = name
}
Person.prototype.sayName = function(){
console.log(this.name)
}
var person = new Person('jack')
person.hasOwnProperty('name') //true
person.hasOwnProperty('sayName')//false
問題15：如下代碼中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的作用把Person的屬性繼承給Male，this指向Male
問題16： 補全代碼，實現繼承
function Person(name, sex){
this.name = name
this.sex = sex
}
Person.prototype.getName = function(){
console.log('My name is'+this.name)
}
function Male(name, sex, age){
Person.call(this,name,sex)
this.age = age
}
Male.prototype = Object.create(Person.prototype)
Male.prototype.getAge = function(){
console.log('年齡是'+this.age)
}
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName() //My name is 若愚
ruoyu.getAge() //年齡是27
