人生就像一列開往墳墓的列車,路途上會有很多站匆浙,很難有人至始至終陪你走完全程安寺,當陪你的人要下車時,即便不舍首尼,也要心存感激挑庶,然后揮手告別言秸。---sunnyhuang
字符串問題
問題1:** apply、call 挠羔、bind有什么作用井仰,什么區(qū)別
bind
:創(chuàng)建一個新函數(shù),當這個函數(shù)被調(diào)用的時候破加,第一個參數(shù)作為this值,之后的參數(shù)作為實參傳入到新函數(shù)中雹嗦。
call
:調(diào)用函數(shù)范舀,并指定這個函數(shù)的this和傳入的若干個參數(shù)值。
apply
:指定this值和以數(shù)組形式傳遞參數(shù)的情況下調(diào)用函數(shù)了罪。
作用: 從它們的用法中可以看出锭环,改變this,傳遞參數(shù)泊藕。
區(qū)別:首先是call和bind的區(qū)別辅辩,call是調(diào)用函數(shù),返回的是函數(shù)的返回值娃圆,而bind是創(chuàng)建一個新函數(shù)玫锋,就像是復制了別人的軀殼,改變了內(nèi)在讼呢,然后作為一個新東西使用撩鹿。然后call和apply的區(qū)別是,傳遞的實參不一樣悦屏,call是單個傳遞节沦,而apply是以數(shù)組的形式傳遞。
var name="window"
function Student(age){
this.age=age
this.name="student";
this.say=function(){
console.log(this.name);
console.log(this.age);
}
}
var fn1=new Student(22)
fn1.say()
var say1=fn1.say.call(window)
// say1 undefined
var fn2=new Student()
var say2=fn2.say.bind(Student)
//say2 function
say2()
問題2: 以下代碼輸出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//轉(zhuǎn)換這個代碼的執(zhí)行函數(shù)
//john.sayHi.call(john)
//所以輸出'John: hi!'
問題3: 下面代碼輸出什么础爬,為什么
func() //window
function func() {
alert(this)
}
//轉(zhuǎn)化這個代碼的執(zhí)行函數(shù)
//func.call(null) 在默認情況下甫贯,call中傳遞的是null,undefined的時候,this指向window
//所以call的第一值就是this看蚜,也就是window
問題4:下面代碼輸出什么
document.addEventListener('click', function(e){
console.log(this); //document
setTimeout(function(){
console.log(this); //window
}, 200);
}, false);
//這里考察2個點 1. setTimeout的默認this值是window 2.事件處理程序中的this就是事件源DOM對象
問題5:下面代碼輸出什么叫搁,why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john) //John
//1. 由于call調(diào)用函數(shù)第一個值傳遞的是this
//2. 所以func函數(shù)的調(diào)用的this的值就是john
問題6: 以下代碼有什么問題,如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么 這里的this指的是#btn
this.showMsg();//這里的this指的是#btn
})
},
showMsg: function(){
console.log('饑人谷');
}
}
//this的指向出現(xiàn)了問題失乾,事件監(jiān)聽函數(shù)中的this指向事件源常熙,但是事件源沒有showMsg()這個方法
//修改1
bind: function(){
var _this=this
$btn.on('click', function(){
_this.showMsg();
})
},
//修改2
bind: function(){
var _this=this
$btn.on('click', function(){
module.showMsg.bind(module)()
//module.showMsg.call(module)
})
},
原型鏈問題
問題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("若愚")
p.sayName();
- 首先明白茧泪,對于函數(shù)先研究原型
prototype
,對于對象研究__proto__
原型鏈__proto__
指向的是一個構(gòu)造函數(shù)的原型,constructor
指向的是對應的構(gòu)造函數(shù)- 因為所有函數(shù)都是由Function創(chuàng)建的聋袋,所以Function.prototype===被創(chuàng)建函數(shù).proto
- 一切函數(shù)的原型對象都是由Object函數(shù)創(chuàng)建的队伟,所以Function.prototype.proto都指向Object的prototype屬性。
解析
Person是構(gòu)造函數(shù)幽勒,p是Person生成的實例嗜侮。每一個函數(shù)在聲明的時候同時會有一個prototype屬性(是一個對象)。
Person.prototype.constructor === Person 構(gòu)造函數(shù)的原型的constructor的屬性指向相應的構(gòu)造函數(shù)
-
p.__ proto __= Person.prototype 實例化的對象的
__ proto__
屬性啥容,指向構(gòu)造函數(shù)的原型(這里想new到底做了什么)?
問題8: 上例中锈颗,對對象 p可以這樣調(diào)用 p.toString()
。toString
是哪里來的? 畫出原型圖?并解釋什么是原型鏈咪惠。
有上圖可以看出:對象p是沒有toString()方法,所以它必須通過proto像上級尋找是否有toString()方法击吱,發(fā)現(xiàn)Person.prototype里面也沒有toString()方法,所以Person.prototype必須又向上級尋找遥昧,在Object.prototype中找到了toString()方法覆醇。像這樣的通過proto不斷的尋找屬性和方法,就是原型鏈炭臭,在自己的作用域中找到了就不會繼續(xù)想上尋找了永脓。
問題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(let i=0;i<this.length;i++){
if(!obj[this[i]]){
obj[this.charAt(i)]=1;
}
else if(obj[this[i]]){
obj[this.charAt(i)]++
}
}
//console.log(obj)
//遍歷這個對象的值
var max=0,val; //假定一個最大值
for(var key in obj){
if(obj[key]>max){
max=obj[key];
val=key;
}
}
return val;
}
var str = 'foajfljadlfjlajfl';
var ch= str.getMostOften();
console.log(ch)
問題10: instanceof
有什么作用徽缚?內(nèi)部邏輯是如何實現(xiàn)的憨奸?
記住instanceof是作用于對象的,看看一個實例化的對象在其原型鏈上存不存在一個構(gòu)造函數(shù)的原型凿试。
object(對象) instanceof constructor(一個構(gòu)造函數(shù))
內(nèi)部邏輯:首先明白1. 每一個對象都一個__proto__
屬性值指向創(chuàng)建它的構(gòu)造函數(shù)排宰。2.通過__proto__
原型鏈會不斷的向上尋找,直到找到目標為止那婉。3. 所有對象都是通過Object對象實例化而成板甘。
function Person(){}
var p=new Person()
p instanceof Person //true 因為p.__proto__===Person.prototype
p instanceof Object //true
Person.prototype={} //重寫原型
p instanceof Person //false 由于原型的重寫,它還是指向原來的详炬,而此時已經(jīng)不是Person的原型了
繼承相關問題
問題11:繼承有什么作用?
繼承的作用:
- 減少代碼的量盐类,實現(xiàn)復用代碼。
- 可以充分的理解面向?qū)ο蟮幕A
問題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);
二種寫法的區(qū)別:
想想第一種寫法呛谜,我們?nèi)绻麆?chuàng)建100個實例對象在跳,是不是每一個對象都會有printName這個方法。
但是有時候隐岛,不是所有對象都需要這個方法猫妙,這就加大了內(nèi)存的負擔。
如果我們按照第二種方法構(gòu)造函數(shù)聚凹,就能夠做到割坠,誰想用就用齐帚,不用就可以不用,只有一條代碼彼哼。
-
這二種的結(jié)構(gòu)都不一樣对妄,生成的實例對象擁有的屬性和方法都不一樣。
總結(jié)
- 公共的屬性和方法就放在構(gòu)造函數(shù)中
- 有的需要有的不需要就放在構(gòu)造函數(shù)的原型中
- 方法到底是放在原型中還是構(gòu)造函數(shù)中敢朱,是根據(jù)需要和結(jié)構(gòu)而定
問題13: Object.create
有什么作用剪菱?兼容性如何?
創(chuàng)建一個指定原型的對象拴签,也可以添加相應屬性琅豆。
通常用于繼承,給一個對象的原型創(chuàng)建一個proto指向它的父類的原型篓吁,從而實現(xiàn)繼承
支持ie9以上(包括ie9),其他主流瀏覽器
function Parent(name,age){
this.name=name;
this.age=age;
}
Parent.prototype.say=function(){console.log("my name is "+this.name)}
function Child(name,age,sex){
Parent.call(this,name,age); //繼承屬性
this.sex=sex;
}
Child.prototype=Object.create(Parent.prototype) //這里重寫了Child的原型蚪拦,并指定了Child.prototype的__proto__指向Parent.prototype
Child.prototype.walking=function(){console.log(this.sex)}
Child.prototype.constructor=Child; //手動指定構(gòu)造函數(shù)
var c=new Child("hcc",24,"男")
問題14: hasOwnProperty
有什么作用杖剪? 如何使用?
我們知道有些屬性是通過原型鏈獲得的驰贷,不一定都是自己的盛嘿,所以急需要一個方法來判定是不是屬于我們的
Object.prototype.hasOwnProperty()
判定一個屬性是不是屬于這個對象本身
var obj={
name:"hcc",
age:24,
say:function(){}
}
obj.hasOwnProperty('name') //true
obj.hasOwnProperty('say') //true
obj.hasOwnProperty('toString') //false
obj.hasOwnProperty('hasOwnProperty' ) //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;
}
Person.call(this, name, sex); //這里的 call 有什么作用
調(diào)用Person這個函數(shù)
改變Person里面的this作用域
傳遞erson這個函數(shù)需要的相應參數(shù)
所以這里變相的實現(xiàn)了Male繼承了Person的屬性
問題16: 補全代碼,實現(xiàn)繼承
function Person(name, sex){
// todo ...
}
Person.prototype.getName = function(){
// todo ...
};
function Male(name, sex, age){
//todo ...
}
//todo ...
Male.prototype.getAge = function(){
//todo ...
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
function Person(name, sex){
this.name=name;
this.sex=sex;
}
Person.prototype.getName = function(){
return "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.constructor=Male;
Male.prototype.getAge = function(){
return "my age is "+ this.age
}
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();