面向?qū)ο?

1、apply、call 、bind有什么作用，什么區(qū)別

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

2、以下代碼輸出什么?

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

輸出"John:hi!" ,func函數(shù)的this指向window對(duì)象，func函數(shù)賦值給john對(duì)象的sayHi方法后并調(diào)用，this指向john對(duì)象。

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

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

func函數(shù)this在函數(shù)找不到，就會(huì)到func所在的作用域（全局作用域）找，所以this指向頂層全局對(duì)象window；也就是當(dāng)前執(zhí)行環(huán)境是window，alert [object Window]

4、下面代碼輸出什么

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

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

var john = { 
  firstName: "John" 
}

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

輸出"John",call方法改變func函數(shù)的this對(duì)象的指向，this指向john對(duì)象

6、 以下代碼有什么問(wèn)題，如何修改

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

問(wèn)題：在$btn的點(diǎn)擊回調(diào)函數(shù)中，this指向$btn,$btn對(duì)象沒(méi)有showMsg屬性，this.showMsg()方法執(zhí)行時(shí)會(huì)報(bào)錯(cuò)，this.showMsg is not a function

  • 使用bind()方法綁定函數(shù)內(nèi)的this對(duì)象
var module= {
    bind: function(){
      $('.btn').on('click', function(){
         console.log(this) //this指什么
         this.showMsg();
      }.bind(this))
    },
    
    showMsg: function(){
      console.log('hello');
    }
  }
  • 使用中間變量保存this對(duì)象
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之間的關(guān)聯(lián)。

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log('My name is :' + this.name);
}
var p = new Person("John")
p.sayName();

通過(guò)函數(shù)定義了類(lèi)Person，類(lèi)（函數(shù)）自動(dòng)獲得屬性prototype；
Person的prototype也是一個(gè)對(duì)象，內(nèi)部有一個(gè)constructor屬性，該屬性指向Person；
Penson的實(shí)例對(duì)象p，有一個(gè)內(nèi)部屬性 _proto_，指向類(lèi)的prototype屬性。

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

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

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

9、對(duì)String做擴(kuò)展，實(shí)現(xiàn)如下方式獲取字符串中頻率最高的字符

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因?yàn)閐 出現(xiàn)了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有什么作用？?jī)?nèi)部邏輯是如何實(shí)現(xiàn)的？

instanceof運(yùn)算符返回一個(gè)布爾值，表示指定對(duì)象是否為某個(gè)構(gòu)造函數(shù)的實(shí)例。instanceof的原理是檢查原型鏈，對(duì)于那些不存在原型鏈的對(duì)象，就無(wú)法判斷。

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

11、繼承有什么作用?

繼承是指一個(gè)對(duì)象直接使用另一對(duì)象的屬性和方法。通過(guò)繼承，可以使子類(lèi)共享父類(lèi)的屬性和方法，可以覆蓋(重寫(xiě))和擴(kuò)展父類(lèi)的屬性和方法，減少內(nèi)存的使用，提高代碼復(fù)用性。

12、 下面兩種寫(xiě)法有什么區(qū)別?

//方法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中每個(gè)實(shí)例的printName方法實(shí)際上作用一樣，但是每個(gè)實(shí)例要重復(fù)一遍，大量對(duì)象存在的時(shí)候是浪費(fèi)內(nèi)存；
方法2中把printName方法存放到Person.prototype里，每個(gè)實(shí)例對(duì)象的proto都指向Person.prototype能訪問(wèn)到，減少了對(duì)象的使用。

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

Object.create() 方法使用指定的原型對(duì)象和其屬性創(chuàng)建了一個(gè)新的對(duì)象。
可以讓另外一個(gè)構(gòu)造函數(shù)的 prototype 的 _proto_ 等于這個(gè)創(chuàng)建的對(duì)象，實(shí)現(xiàn)繼承。如：

//Person父類(lèi)
function Person (name) {
  this.name=name
}
Person.prototype.say = function () {
  console.log('My name is ' + this.name)
}
//Student子類(lèi)
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）都兼容了這個(gè)方法。如果遇到老式瀏覽器，可以用下面的代碼兼容：

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的一個(gè)方法，返回一個(gè)布爾值，用于判斷某個(gè)屬性定義在對(duì)象自身，還是定義在原型鏈上。
使用方法：obj.hasOwnProperty(prop)
prop：要檢測(cè)的屬性 （字符串 名稱(chēng)或者 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;
}

改變構(gòu)造函數(shù)Person內(nèi)部this對(duì)象的指向，指向Male的實(shí)例對(duì)象，使Male的實(shí)例對(duì)象可以使用Person的屬性。

16、補(bǔ)全代碼，實(shí)現(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('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();
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • javaScript：3天理解面向?qū)ο螅?） prototype 理解：每個(gè)構(gòu)造函數(shù)都有prototype原型屬性...
    小飛蟻閱讀 521評(píng)論 0贊 7
  • 普通創(chuàng)建對(duì)象和字面量創(chuàng)建對(duì)象不足之處：雖然 Object 構(gòu)造函數(shù)或?qū)ο笞置媪慷伎梢杂脕?lái)創(chuàng)建單個(gè)對(duì)象，但這些方式有...
    believedream閱讀 2,566評(píng)論 2贊 18
  • 博客內(nèi)容：什么是面向?qū)ο鬄槭裁匆嫦驅(qū)ο竺嫦驅(qū)ο缶幊痰奶匦院驮瓌t理解對(duì)象屬性創(chuàng)建對(duì)象繼承 什么是面向?qū)ο?面向?qū)ο?..
    _Dot912閱讀 1,527評(píng)論 3贊 12
  • 蒹?玉樹(shù)雜叢生 昏鴉布谷亂鳴報(bào) 倚仗憑闌暮不堪 故事難遇嘆速老 晁錯(cuò)有知無(wú)悔意 一抔黃土遺枯陶 路人踏徐目不休 那...
    肅默閱讀 208評(píng)論 2贊 2
  • 本書(shū)要討論的主要問(wèn)題是，如何在新經(jīng)濟(jì)形勢(shì)下成為贏家。 有兩種關(guān)鍵的核心能力。 一是迅速掌握復(fù)雜工具的能力。 二是在...
    kafkaliu閱讀 176評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容