-
this 相關問題
1. apply、call 、bind有什么作用，什么區(qū)別
- bind()方法創(chuàng)建一個新的函數, 當被調用時，將其this關鍵字設置為提供的值，在調用新函數時，在任何提供之前提供一個給定的參數序列參數
語法
fun.bind(thisArg[, arg1[, arg2[, ...]]])
用法:改變this指向
this.x = 1;
var obj = {
x: 2,
fn: function(){
console.log(this.x)
}
}
obj.fn() // 輸出2
var fn2 = obj.fn
fn2() //輸出 1
var fn3 = obj.fn.bind(obj);
fn3() //輸出 2
-
apply()方法調用一個函數, 其具有一個指定的this
值，以及作為一個數組（或[類似數組的對象]提供的參數。語法
fun.apply(thisArg, [argsArray]) //第二個參數為數組 如果這個函數處于非嚴格模式下，則指定為null和undefined的this值會自動指向全局對象(瀏覽器中就是window對象)用法1 : 改變this指向
this.x = 1; function fn(){ //this指向window var x = 2; console.log(this.x); console.log(this===window) } var obj = { x: 3 } fn(); //1 true fn.apply();//1 fn.apply(obj); // 3 false fn里面的this指向了obj用法2 : 將數組轉化為參數列表
var numbers = [5, 6, 2, 3, 7]; Math.max(5,6,2,3,7) // Math.max()中的參數不能為數組 var max = Math.max.apply(null, numbers); //使用apply將numbers數組傳入Math.max()中 var min = Math.min.apply(null, numbers); -
call() 方法調用一個函數, 其具有一個指定的this值和分別地提供的參數(參數的列表)。
語法
fun.call(thisArg[, arg1[, arg2[, ...]]]) 如果這個函數處于非嚴格模式下，則指定為null和undefined的this值會自動指向全局對象(瀏覽器中就是window對象)用法 : 改變this指向
this.x = 1; function fn(){ //this指向window var x = 2; console.log(this.x); console.log(this===window) } var obj = { x: 3 } fn(); //1 true fn.call();//1 fn.call(obj); // 3 false fn里面的this指向了obj
call()和apply()的區(qū)別：
call()方法的作用和 apply()方法類似，只有一個區(qū)別，就是call()方法接受的是若干個參數的列表，而apply()方法接受的是一個包含多個參數的數組。
2.以下代碼輸出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() // this指向john
輸出：John: hi!
3. 下面代碼輸出什么，為什么
func()
function func() {
alert(this)
}
輸出：window
func() === func.call(undefined) //此時this指向window
4.
下面代碼輸出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
輸出：#document 和 window
事件處理程序中this代表事件源DOM對象
在setTimeout中this指向全局變量window
5.下面代碼輸出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
輸出： John
call()改變了this的指向 指向了john
6.以下代碼有什么問題，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('饑人谷');
}
}
this指向了$btn
this.showMsg不能被調用 因為此this指的是$btn
修改：
var module= {
bind: function(){
var _this = this
$btn.on('click', function(){
console.log(this) //this指向module
_this.showMsg();
})
},
showMsg: function(){
console.log('饑人谷');
}
}
-
原型鏈相關問題
7.有如下代碼，解釋Person、 prototype、proto、p、constructor之間的關聯(lián)。
function Person(name){
this.name = name;
}
Person.prototype.sayName = function(){
console.log('My name is :' + this.name);
}
var p = new Person("若愚")
8. 上例中，對對象 p可以這樣調用 p.toString()。toString是哪里來的? 畫出原型圖?并解釋什么是原型鏈。
p是構造函數person生成的對象，在生成之后，就在p對象中添加了_ proto_屬性，這是一個對象。這個對象指向person中的protoType對象。而prototype是由Object函數生成的，因此protoType._ proto_指向Object.protoType。
調用p.toString( )時，在p對象中找，沒有，則到proto中尋找，即到person.prototype中尋找，發(fā)現仍然沒有，則繼續(xù)到person.prototype._ proto_中尋找，即p._ proto_._ proto_（也就是Object.prototype）。
9.
對String做擴展，實現如下方式獲取字符串中頻率最高的字符
String.prototype.getMostOften = function(){
var obj = {};
for(var i = 0 ; i < this.length; i++){
if(obj[ this[i] ]){
obj[this[i]]++
}
else{
obj[this[i]] = 1;
}
}
var max = 0;
var word = ''
for( var key in obj ){
if(obj[key] > max){
max = obj[key]
word = key
}
}
return word + ':'+ max
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現了5次
10. instanceOf有什么作用？內部邏輯是如何實現的？
obj instanceof func
作用：instanceOf可以判斷一個對象是否是一個函數生成的。
function isinstanceof(obj,func){
var oldObj=obj.proto;
do{
if(oldObj === func.prototype){
return true;
}else{
oldObj=oldObj.proto;
}
}
while(oldObj);
return false;
}
-
繼承相關問題
11. 繼承有什么作用?
- 子類擁有父類的屬性和方法，不需要重復寫代碼，修改時也-
只需修改一份代碼- 可以重寫和擴展父類的屬性和代碼，又不影響父類本身
12. 下面兩種寫法有什么區(qū)別?
//方法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中每創(chuàng)建一個People的實例都會創(chuàng)建一個printName函數。方法2中所有People的實例共享printName函數，從而節(jié)約資源。
13. Object.create 有什么作用？兼容性如何？
Object.create()方法創(chuàng)建一個擁有指定原型和若干個指定屬性的對象。
Object.create(proto, [ propertiesObject ])
// proto
一個對象，應該是新創(chuàng)建的對象的原型。
用法：
function obj1(){
this.a = 1;
this.b = 2;
}
obj1.prototype.move = function(a,b){
this.a += a
this.b += b
this.c = 3
console.log("obj1 move.")
}
function obj2(){
obj1.call(this)
}
obj2.prototype = Object.create(obj1.prototype)
var rect = new obj2()
rect.move(1,2)//輸出obj1 move.
14. hasOwnProperty有什么作用？ 如何使用？
hasOwnPerperty是Object.prototype的一個方法，可以判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性，hasOwnProperty是JavaScript中唯一一個處理屬性但是不查找原型鏈的函數
rect.hasOwnProperty('b'); //true
rect.hasOwnProperty('c'); //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;
}
使Male的實例擁有Person的屬性。
16. 補全代碼，實現繼承
function inherit(Person,Male){
var _prototype = Object.create(Person.prototype)
_prototype.constructor = Male
Male.prototype = _prototype
}
var _prototype = Object.create(Person.prototype)
_prototype.constructor = Male
Male.prototype = _prototype
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.getName = function(){
console.log("this.name")
};
inherit(Person,Male)
function Male(name, sex, age){
this.age = age;
Person.call(this,name, sex)
}
Male.prototype.printName = function(){
console.log(this.name)
}
Male.prototype.getAge = function(){
console.log(this.age)
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();