1. this
2.原型鏈-instanceof實現
3.繼承的實現
- ** this 相關問題 **
** 1、 apply、call 和bind有什么作用，什么區(qū)別？**####
var name = 'global';
var person = {
name: 'zero'
};
// 輸出姓名、年齡和職業(yè)
function printInfo(age, job) {
console.log(this.name, age, job);
}
// 直接調用
printInfo(20, '前端工程師');
// 打印：global 20 前端工程師
// 因為默認的上下文是window，所以this.name是全局定義的global， 如果我們想打印出來zero的話，就需要改變函數執(zhí)行的上下文
printInfo.call(person, 20, '前端工程師');
printInfo.apply(person, [20, '前端工程師']);
// 這兩種方式是一樣的，第一個參數都是傳進去的上下文，this.name取的是person.name，所以打印出來的名字就是zero了，后面的為age和job，只是參數傳遞的方式不一樣，apply比較特殊，把要傳的參數放在數組里面
// 而bind和以上兩種有區(qū)別，bind是es5定義的新方法，用來返回一個有自己上下文的函數，用法也比較類似：
printInfo.bind(person)(20, '前端工程師');
// printInfo.bind(person)這一塊是返回的以peron為上下文的函數，后面的(20, '前端工程師')是函數調用
-
他們的常用用法：
1.數組之間的追加；
2.獲取數組中的最大值和最小值，利用他們擴充作用域擁有Math的min和max方法；
由于沒有什么對象調用這個方法，所以第一個參數可以寫作null或者本身；var numbers = [5, 458 , 120 , -215 ]; var maxInNumbers = Math.max.apply(Math, numbers), //458 maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458
3.驗證是否是數組（前提是toString（）方法沒有被重寫過）
function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}
4.讓類數組擁有數組的方法
比如arguments對象，獲取到的文檔節(jié)點等，并沒有數組的那些方法：
Array.prototype.slice.apply（argument）; //理論上來說這個比較快，直接在原型上查找slice方法
//但實際上比較慢
或者
[].slice.apply(arguments); //理論上來說這個比較慢，因為要Array做一個實例化再查找slice方法
//實際上比較快，因為現在的各種自動化工具會把上一種方法轉換為這種，而第二種代碼比較簡潔，所以會比較快；
bind（）--也是改變函數體內this的指向;
bind會創(chuàng)建一個新函數，稱為綁定函數，當調用這個函數的時候，綁定函數會以創(chuàng)建它時傳入bind（）方法的第一個參數作為this，傳入bind（）方法的第二個及以后的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數；
bind與apply、call最大的區(qū)別就是：bind不會立即調用，其他兩個會立即調用
例子：
- 三個的使用區(qū)別：
- 都是用來改變函數的this對象的指向的；
- 第一個參數都是this要指向的對象；
- 都可以利用后續(xù)參數傳參；
- call方法接收參數列表，而apply方法接收參數數組；bind是返回對應函數，便于稍后調用，apply、call是立即調用；
** 2、以下代碼輸出什么? **####
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//John:hi!
調用了對象john的函數，this指向john對象，輸出John:hi!
** 3、下面代碼輸出什么，為什么？ **####
func()
function func() {
alert(this)
}
//Object window
因為在函數func()被直接調用時，this綁定到全局對象。在瀏覽器中，window 就是該全局對象。
** 4、下面代碼輸出什么？ **####
document.addEventListener('click', function(e){
console.log(this); // 輸出document對象,點擊頁面，控制臺輸出document。綁定事件函數時，this表示觸發(fā)此事件的DOM對象。
setTimeout(function(){
console.log(this); // 輸出window對象,setTimeout、setInterval這兩個方法執(zhí)行的函數this也是全局對象
}, 200);
}, false);
** 5、下面代碼輸出什么，why **####
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
//John
func()函數通過call()函數調用，此時this代表John對象，john.firstName存在，輸出"John"
** 6、以下代碼有什么問題，如何修改 **####
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么 //這里的this指的是觸發(fā)此事件的DOM對象，不是module。
this.showMsg(); ////由于this是$btn，所以在執(zhí)行這句是會報錯。
})
},
showMsg: function(){
console.log('饑人谷');
}
}
修改如下：
var module= {
bind: function(){
var _this = this; //先將this賦給變量_this保存起來。在調用函數bind時，這里的this就是對象module。
$btn.on('click', function(){
console.log(this)
_this.showMsg(); //此時相當于執(zhí)行module.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();
function Person(name){
this.name = name;
}
Person.prototype.sayName = function(){
console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();
- Preson是構造函數，也是一個對象.
- p為Person的實例，擁有Person原型鏈上的屬性和方法.
- prototype是構造函數內部的原型對象，該對象內部的屬性和方法能夠被實例所繼承；
- constructor是定義在構造函數原型對象prototype上的屬性;
- proto為實例對象的屬性，其指向構造函數的原型對象prototype；
8、上例中，對對象 p可以這樣調用 p.toString()。toString是哪里來的? 畫出原型圖?并解釋什么是原型鏈。####
toString是對象p繼承的Object對象的方法。
-
什么是原型鏈?
JS在創(chuàng)建對象（不論是普通對象還是函數對象）的時候，都有一個叫做proto的內置屬性，用于指向創(chuàng)建它的函數對象的原型對象prototype。在訪問一個對象屬性的時候，如果對象本身沒有找到這個屬性，就會沿著原型鏈一層一層的尋找。
prototype.png
** 9、對String做擴展，實現如下方式獲取字符串中頻率最高的字符 **####
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現了5次
代碼擴展如下：
//獲取字符串中頻率最高的字符
String.prototype.getMostOften = function(){
var obj = {};
var str = this;
for(var i=0;i<str.length;i++){
var key = str[i];
if(!obj[key]){
obj[key] =1;
}else{
obj[key]++;
}
}
var max = 0;
var max_key = '';
for(key in obj){
if(obj[key]>max){
max = obj[key];
max_key = key;
}
}
return max_key;
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d 因為d出現了5次
** 10、instanceOf有什么作用？內部邏輯是如何實現的？**####
instanceOf：判斷一個對象是否為另一個對象的實例。繼承中判斷實例是否屬于它的父類。
內部邏輯：順著對象的原型連一直往上找,若原型鏈上的某一個proto指向了構造函數的prototype則返回true，找完了原型鏈也找不到則返回false。
function instanceOf(obj,fn){
var oldpro = obj.proto;
while(oldpro){
if(oldpro === fn.prototype){
return true;
}else{
oldpro = oldpro.proto;
}
}
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);
- 方法一printName這個方法作為構造函數方法,在創(chuàng)建P1實例的時候相當于又重新拷貝了一個printName方法.
- 方法二printName這個方法作為原型鏈方法,創(chuàng)建P1實例的時候相當于借用原型的printName方法.
- 推薦使用第二種。方法2把通用的方法寫在原型對象中，每一個實例都能去引用該方法，節(jié)約了空間。
** 13、 Object.create 有什么作用？兼容性如何？ **####
-
Object.create() 方法它會把一個對象作為另一個對象的原型.可以通過Object.create方法實現繼承屬性。
如：Male.prototype = Object.create(Person.prototype);
語法：Object.create(proto, [ propertiesObject ])
這是ES5的語法，支持ES5的瀏覽器才支持這么用。
** 14、hasOwnProperty有什么作用？ 如何使用？ **####
- hasOwnPerperty是Object.prototype的一個方法，可以判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性，hasOwnProperty是JavaScript中唯一 一個處理屬性但是不查找原型鏈的函數。
- 用法：obj.hasOwnProperty(prop) // prop為要檢測的屬性
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.printName = function() {
console.log(this.name);
}
function Man(name) {
this.name = name;
}
Man.prototype = Object.create(Person.prototype);
var p = new people('lulu');
console.log(p.hasOwnProperty('printName'));//false
- 用法：obj.hasOwnProperty(prop) // prop為要檢測的屬性
** 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 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;
}
Male.prototype = Object.create(Person.prototype); //方法一
Male.prototype.__proto__=Person.prototype; //方法二
Male.prototype = new Person(); //方法三
Male.prototype.getAge = function(){
console.log(this.age);
};
var ruoyu = new Male('leslie', '男', 27);
ruoyu.getName();
