this & 原型链 & 继承

this 相关

问题1： apply、call 、bind有什么作用，什么区别

apply()和call()方法都是在指定一个this值和参数的情况下调用某个函数。
bind()方法创建一个新的函数, 当被调用时，它的this关键字被设置为提供的值 ，在调用新函数时，提供任何一个给定的参数序列。
区别

• apply与call只有一个区别
  • call()方法接受的是若干个参数的列表。fun.call(thisArg[, arg1[, arg2[, ...]]])
  • apply()方法接受的是一个包含多个参数的数组。fun.apply(thisArg[, argsArray])
• bind()与call和apply不同之处在于它返回一个函数, fun.bind(thisArg[, arg1[, arg2[, ...]]])

问题2： 以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() //输出john: hi! , 方法调用,this指向调用者

问题3： 下面代码输出什么，为什么

func()  //输出window, this是全局对象
function func() { 
  alert(this)
}

问题4：下面代码输出什么

document.addEventListener('click', function(e){
    console.log(this);  //输出document, 在事件处理程序中this代表事件源DOM对象
    setTimeout(function(){
        //输出window, setTimeout和setInterval执行的函数this是全局对象
        console.log(this);  
    }, 200);
}, false);

问题5：下面代码输出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john) //输出John, call()的第一个参数指定了this为john对象

问题6： 以下代码有什么问题，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //这里的this指$btn
      this.showMsg();  //$btn上没有showMsg()这个方法
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}
// 修改后
var module= {
  bind: function(){
    var _this = this //这时this的值是module, 把值存入_this
    $btn.on('click', function(){
      console.log(this)  //this为$btn 
      _this.showMsg();  //输出饥人谷
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

原型链相关问题

问题7：有如下代码，解释Person、 prototype、__proto__ 、p、constructor之间的关联。

• Person是函数定义的类, 类（函数）自动获得属性prototype。
• p是Person的实例, 每个类的实例都会有一个内部属性__proto__ ，指向类的prototype属性
• prototype是构造函数内部的原型对象，所以拥有contructor和__proto__ 属性。constructor指向了构造函数Person。

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

问题8： 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。

当调用p.tostring()时, 先会在p里找tostring方法, 找不到会沿着__proto__到 Person.prototype中找,还找不到就接着沿着__proto__找, 直到在object.prototype中找到为止
p.__proto__ ==> Person.prototype.__proto__ ==> object.prototype

原型图.png

在 javaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain）。

问题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++){
      if(obj[this.charAt(i)]){
        obj[this.charAt(i)]++
      }else if(!obj[this.charAt(i)]){
        obj[this.charAt(i)] = 1
      }
    }
  
  var max = 0,
      val = ''
  for(var key in obj){
    if(obj[key] > max){
      max = obj[key]
      val = key
    }
  }
  return val
}


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

问题10： instanceOf有什么作用？内部逻辑是如何实现的？

语法:object instanceof constructor
instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。即左侧的对象是否是右侧类的实例，如果是则表达式返回true；否则返回false。
内部逻辑: 循环判断 obj.__proto__.__proto__..... === con.prototype

---

继承

问题11：继承有什么作用?

继承是指一个对象直接使用另一对象的属性和方法。
优点:

• 优化代码结构和对象关系
• 优化内存空间, 一些共用的方法和属性不用重复写了. 子类需要添加或修改新的方法时, 可以重写或扩展而不影响父类

---

问题12： 下面两种写法有什么区别?

方法2把printName写到了原型链里, 节约了代码量, 提高了性能, 而方法1写在构造函数中, 每创造一个实例都要运行一遍printName函数.

//方法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);

问题13： Object.create 有什么作用？兼容性如何？

Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。

child = Object.create(parent.prototype)
//使child.__proro__ = parent.prototype

ES5兼容性

问题14： hasOwnProperty有什么作用？ 如何使用？

hasOwnPerperty是Object.prototype的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性
hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数

obj.hasOwnProperty(prop)
//prop : 要检查的属性名
//obj: 要检查的对象
//返回一个布尔值

问题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;
}

问题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
}

function inherit(superType, subType){
    subType.prototype = Object.create(superType.prototype)
    subType.prototype.constructor = subType
}
inherit(Person, Male)
Male.prototype.getAge = function(){
    console.log(this.age)
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();