面向對象2

1、apply、call 、bind有什么作用，什么區別

  • 在JS中，這三者都是用來改變函數的this對象的指向的
    • 都是用來改變函數的this對象的指向的。
    • 第一個參數都是this要指向的對象。
    • 都可以利用后續參數傳參。
  • 區別
    • bind，返回一個新函數，并且使函數內部的this為傳入的第一個參數；若函數還需其他參數需在調用時傳入。var fn3 = obj1.fn.bind(obj1);fn3();
    • call方法接收參數列表fn.call(context, param1, param2...)
    • 而apply接收參數數組fn.apply(context, paramArray)

2、以下代碼輸出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()

輸出"John:hi!" ,func函數的this指向window對象，func函數賦值給john對象的sayHi方法后并調用，this指向john對象。

3、下面代碼輸出什么，為什么

func() 
function func() { 
  alert(this)
}

func函數this在函數找不到，就會到func所在的作用域（全局作用域）找，所以this指向頂層全局對象window；也就是當前執行環境是window，alert [object Window]

4、下面代碼輸出什么

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
//document，點擊事件回調方法執行時，this指向document
//window，定時器回調函數執行時，this指向window

5、下面代碼輸出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)

輸出"John",call方法改變func函數的this對象的指向，this指向john對象

6、 以下代碼有什么問題，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('hello');
  }
}

問題：在$btn的點擊回調函數中，this指向$btn,$btn對象沒有showMsg屬性，this.showMsg()方法執行時會報錯，this.showMsg is not a function

  • 使用bind()方法綁定函數內的this對象
var module= {
    bind: function(){
      $('.btn').on('click', function(){
         console.log(this) //this指什么
         this.showMsg();
      }.bind(this))
    },
    
    showMsg: function(){
      console.log('hello');
    }
  }
  • 使用中間變量保存this對象
var module= {
    bind: function(){
      var _this= this;
      $('.btn').on('click', function(){
         console.log(_this) //this指什么
         _this.showMsg();
      })
    },
    
    showMsg: function(){
      console.log('hello');
    }
  }

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("John")
p.sayName();

通過函數定義了類Person，類（函數）自動獲得屬性prototype；
Person的prototype也是一個對象，內部有一個constructor屬性，該屬性指向Person；
Penson的實例對象p，有一個內部屬性 _proto_，指向類的prototype屬性。

p.__proto__ === Person.prototype
p.__proto__.constructor === Person.prototype.constructor === Person

8、 上例中，對對象 p可以這樣調用 p.toString()。toString是哪里來的? 畫出原型圖?并解釋什么是原型鏈。

  • toString是哪里來的
    • 對象p會在自己的屬性和方法找，找到后就返回；
    • 沒有找到，通過p的proto屬性，找到其類型Person的prototype屬性(原型對象)，繼續查找，找到就返回；
    • 沒有找到，通過prototype的_proto_屬性找到Object的prototype屬性(任何類的prototype屬性本質上都是個類Object的實例,所以prototype也和其它實例一樣也有個_proto_內部屬性，指向其類型Object的prototype),找到返回。
  • 原型圖
原型鏈.png
  • 解釋什么是原型鏈
    JS在創建對象（不論是普通對象還是函數對象）的時候，都有一個叫做proto的內置屬性，用于指向創建它的函數對象的原型對象prototype。在訪問一個對象屬性的時候，如果對象本身沒有找到這個屬性，就會沿著原型鏈一層一層的尋找。

9、對String做擴展，實現如下方式獲取字符串中頻率最高的字符

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現了5次

String.prototype.getMostOften = function(){
  var obj = {}
  for(var i=0; i<this.length; i++){
    var item = this.substr(i,1)
    if(obj[item]){
      obj[item]++
    }else{
      obj[item] = 1
    }
  }
  var num =0,max = null
  for(key in obj){
    if(obj[key]>num){
      num = obj[key]
      max = key
    }
  }
  return max
}
var str = 'ahbbccdeddddfg'
var ch = str.getMostOften()
console.log(ch)

10、 instanceOf有什么作用？內部邏輯是如何實現的？

instanceof運算符返回一個布爾值，表示指定對象是否為某個構造函數的實例。instanceof的原理是檢查原型鏈，對于那些不存在原型鏈的對象，就無法判斷。

var arr = [1, 2, 3];
arr instanceof Array; //true
其實是判斷arr.__proto__===Array.prototype
arr instanceof Object; //true
判斷arr.__proto__.__proto__===Object.prototype

11、繼承有什么作用?

繼承是指一個對象直接使用另一對象的屬性和方法。通過繼承，可以使子類共享父類的屬性和方法，可以覆蓋(重寫)和擴展父類的屬性和方法，減少內存的使用，提高代碼復用性。

12、 下面兩種寫法有什么區別?

//方法1
function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('John', 2)

//方法2
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('Lisa', 27);

方法1中每個實例的printName方法實際上作用一樣，但是每個實例要重復一遍，大量對象存在的時候是浪費內存；
方法2中把printName方法存放到Person.prototype里，每個實例對象的proto都指向Person.prototype能訪問到，減少了對象的使用。

13、 Object.create 有什么作用？兼容性如何？

Object.create() 方法使用指定的原型對象和其屬性創建了一個新的對象。
可以讓另外一個構造函數的 prototype 的 _proto_ 等于這個創建的對象，實現繼承。如：

//Person父類
function Person (name) {
  this.name=name
}
Person.prototype.say = function () {
  console.log('My name is ' + this.name)
}
//Student子類
function Student (name) {
  this.name = name
}
Student.prototype.study = function () {
  console.log('I am studying!')
}
//Student.prototype.__proto__ === Person.prototype
Student.prototype.__proto__ = Object.create(Person.prototype)

var xiaohong = new Student('xiaohong')
console.log(xiaohong.name)
xiaohong.study()
xiaohong.say()

//"xiaohong"
//"I am studying!"
//"My name is xiaohong"

兼容性：各大瀏覽器的最新版本（包括IE9）都兼容了這個方法。如果遇到老式瀏覽器，可以用下面的代碼兼容：

if(!Object.create){
Object.create = function(obj){
    function F(){};
    F.prototype = obj;
    return new F();
}
}
或
if(!Object.create){
Object.create = function(obj){
    var obj1 = {};
    obj1.__proto__ = obj;
    return obj1;
}
}

14、 hasOwnProperty有什么作用？ 如何使用？

hasOwnPerperty是Object.prototype的一個方法，返回一個布爾值，用于判斷某個屬性定義在對象自身，還是定義在原型鏈上。
使用方法：obj.hasOwnProperty(prop)
prop：要檢測的屬性 （字符串 名稱或者 Symbol）。

o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.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內部this對象的指向，指向Male的實例對象，使Male的實例對象可以使用Person的屬性。

16、補全代碼，實現繼承

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('John', '男', 27);
ruoyu.printName();

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 = Object.create(Person.prototype).constructor
//或Male.prototype.__proto__ = Object.create(Person.prototype)
Male.prototype.getAge = function(){
  console.log('I am ' + this.age)
};

var ruoyu = new Male('Jon', '男', 27);
ruoyu.getName();
//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 = Object.create(Person.prototype).constructor
//或Male.prototype.__proto__ = Object.create(Person.prototype)
Male.prototype.getAge = function(){
  console.log('I am ' + this.age)
};

var ruoyu = new Male('John', '男', 27);
ruoyu.getName();
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 230,106評論 6贊 542
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 99,441評論 3贊 429
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 178,211評論 0贊 383
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,736評論 1贊 317
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 72,475評論 6贊 412
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,834評論 1贊 328
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,829評論 3贊 446
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 43,009評論 0贊 290
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,559評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,306評論 3贊 358
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,516評論 1贊 374
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 39,038評論 5贊 363
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,728評論 3贊 348
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,132評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,443評論 1贊 295
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 52,249評論 3贊 399
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,484評論 2贊 379

推薦閱讀更多精彩內容

  • javaScript：3天理解面向對象（2） prototype 理解：每個構造函數都有prototype原型屬性...
    小飛蟻閱讀 467評論 0贊 7
  • 普通創建對象和字面量創建對象不足之處：雖然 Object 構造函數或對象字面量都可以用來創建單個對象，但這些方式有...
    believedream閱讀 2,414評論 2贊 18
  • 博客內容：什么是面向對象為什么要面向對象面向對象編程的特性和原則理解對象屬性創建對象繼承 什么是面向對象 面向對象...
    _Dot912閱讀 1,445評論 3贊 12
  • 蒹?玉樹雜叢生 昏鴉布谷亂鳴報 倚仗憑闌暮不堪 故事難遇嘆速老 晁錯有知無悔意 一抔黃土遺枯陶 路人踏徐目不休 那...
    肅默閱讀 190評論 2贊 2
  • 本書要討論的主要問題是，如何在新經濟形勢下成為贏家。 有兩種關鍵的核心能力。 一是迅速掌握復雜工具的能力。 二是在...
    kafkaliu閱讀 147評論 0贊 0