面向对象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();