this
玩轉(zhuǎn)this的一些函數(shù)——bind您觉、apply、call 的用法
- bind：
fun.bind(thisArg[, arg1[, arg2[, ...]]])
bind()方法創(chuàng)建一個(gè)新的函數(shù)拖吼，當(dāng)函數(shù)被調(diào)用時(shí)鳞上，將其this值設(shè)定為bind的第一個(gè)參數(shù)。之后的參數(shù)數(shù)列作為參數(shù)傳遞給被調(diào)用函數(shù)吊档。
- apply：
fun.apply(thisArg,[argsArray])
apply()方法調(diào)用一個(gè)函數(shù)篙议，使其具有一個(gè)指定的this值，以及作為一個(gè)數(shù)組(或類數(shù)組)提供的參數(shù)籍铁。在ES5開始涡上，只要有一個(gè)length屬性和[0...length)范圍內(nèi)的整數(shù)屬性，即可傳給apply來使用拒名。
- call：
fun.call(thisArg[, arg1[, arg2[, ...]]])
call()方法同樣是調(diào)用一個(gè)函數(shù)，使其具有指定的this值和提供的參數(shù)(列表)芋酌≡鱿裕可以讓call()中的對(duì)象調(diào)用當(dāng)前對(duì)象所擁有的function。
call()與apply()的作用是類似的，只有一個(gè)區(qū)別： call()方法接受的是若干個(gè)參數(shù)的列表同云，而apply()方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組糖权。
一些練習(xí)題：
在沒有call、apply炸站、bind 的情況下星澳，this的值通常依賴于函數(shù)的調(diào)用者
- 1
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() //彈出 John: hi! 因?yàn)楹瘮?shù)調(diào)用者是 對(duì)象john
- 2
func()
function func() {
alert(this)
}
//申明提升，再調(diào)用函數(shù)旱易，調(diào)用者為window禁偎，所以彈出window
- 3
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
//先打印document，再打印window阀坏，因?yàn)榈谝粋€(gè)打印的調(diào)用者是document如暖，而setTimeout的調(diào)用者通常是window。
- 4
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
//彈出John忌堂，使用call方法將函數(shù)的this值指向了john對(duì)象盒至。
- 5
var module= {
bind: function(){//添加 _this = this
$btn.on('click', function(){
console.log(this) //this指向的是$btn，所以下面的調(diào)用是無法成功的
this.showMsg();//_this.showMsg()
})
},
showMsg: function(){
console.log('饑人谷');
}
}
原型鏈
function Person(name){
this.name = name;
}
Person.prototype.sayName = function(){
console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();
Preson是構(gòu)造函數(shù)士修，也是一個(gè)對(duì)象枷遂。
p為Person的實(shí)例，擁有Person原型鏈上的屬性和方法棋嘲。
p.__proto__指向Person.prototype登淘。
Person中的prototype中的__proto__指向的是Object()的prototype，其中有toString等方法封字，所以p可以調(diào)用toString方法黔州。
原型鏈：每個(gè)對(duì)象都有一個(gè)指向它的原型（prototype）對(duì)象的內(nèi)部鏈接。這個(gè)原型對(duì)象又有自己的原型阔籽，直到某個(gè)對(duì)象的原型為 null 為止（也就是不再有原型指向）流妻，組成這條鏈的最后一環(huán)。這種一級(jí)一級(jí)的鏈結(jié)構(gòu)就稱為原型鏈（prototype chain）笆制。
原型鏈绅这、instanceOf 參考
instanceOf：
instanceOf運(yùn)算符用來測(cè)試一個(gè)對(duì)象在其原型鏈中是否存在一個(gè)構(gòu)造函數(shù)prototype 屬性。其邏輯是沿著原型鏈層層遞進(jìn)在辆，比較對(duì)象中是否存在構(gòu)造函數(shù)的prototype证薇。
function instanceof(obj, fn) {
var objProto = obj.__proto__
while (objProto) {
if (objProto === fn.prototype) {
return true
}else{
objProto = objProto.__proto__
}
}
return false
}
小題目：對(duì)String做擴(kuò)展，實(shí)現(xiàn)如下方式獲取字符串中頻率最高的字符
String.prototype.getMostOften = function () {
var target = {};
this.split('').forEach(function (i) {
target[i] ? target[i] += 1 : target[i] = 1;
})
console.log(target)
var max = 0,
maxKey = ''
Object.keys(target).forEach(function (key) {
if (target[key] > max) {
max = target[key]
maxKey = key
}
return maxKey
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因?yàn)閐 出現(xiàn)了5次
繼承
繼承有啥用：
1.子類擁有父類的屬性和方法匆篓，不需要重復(fù)寫代碼浑度，也不需要更多的空間，修改時(shí)也只需修改一份代碼
2.可以重寫和擴(kuò)展父類的屬性和代碼鸦概，又不影響父類本身
繼承的一些小問題：
1.下面兩種寫法有什么區(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);
方法一的printName是在父類自身里的一個(gè)方法箩张，當(dāng)子類繼承時(shí)，將產(chǎn)生一個(gè)屬于子類自己的功能相同的新的printName。
方法二中的printName是存在于原型鏈中的一個(gè)方法先慷，當(dāng)子類繼承時(shí)饮笛，由于同時(shí)繼承了prototype，所以子類也可以使用printName的方法论熙。
方法二與方法一相比福青，法二可以節(jié)省部分內(nèi)存。
2.Object.create 有什么作用脓诡？兼容性如何无午？
Object.create() 方法會(huì)使用指定的原型對(duì)象及其屬性去創(chuàng)建一個(gè)新的對(duì)象。
3.hasOwnProperty有什么作用誉券？ 如何使用指厌？
hasOwnProperty() 方法會(huì)返回一個(gè)布爾值，指示對(duì)象是否具有指定的屬性作為自身（不繼承）屬性踊跟。
var o = {
a: 1;
b: 2
}
o.hasOwnProperty("a")//true
o.hasOwnProperty("c")//false
o.hasOwnProperty("toString")//false
4.如下代碼中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;
}
在調(diào)用Male時(shí)，運(yùn)行到Person函數(shù)時(shí)商玫，將Person的this 指定為 Male的this箕憾。并且將Male的 name和sex 作為參數(shù)傳給Person。
5.補(bǔ)全代碼拳昌，實(shí)現(xiàn)繼承
function Person(name, sex){
this.name = name
this.sex = sex
}
Person.prototype.printName = function(){
console.log(this.name)
};
function Male(name, sex, age){
this.name = name
this.sex = sex
this.age = age
}
Male.prototype = Object.create(Person.prototype)
Male.prototype.getAge = function(){
console.log(this.age)
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
