this、原型链、继承

1. this
2.原型链-instanceof实现
3.继承的实现

• ** this 相关问题 **

** 1、 apply、call 和bind有什么作用，什么区别？**####

  var name = 'global';
  var person = {
      name: 'zero'
  };
   // 输出姓名、年龄和职业
   function printInfo(age, job) {
       console.log(this.name, age, job);
   }
   // 直接调用
   printInfo(20, '前端工程师');
  // 打印：global 20 前端工程师
  // 因为默认的上下文是window，所以this.name是全局定义的global，   如果我们想打印出来zero的话，就需要改变函数执行的上下文
   printInfo.call(person, 20, '前端工程师');
   printInfo.apply(person, [20, '前端工程师']);
   // 这两种方式是一样的，第一个参数都是传进去的上下文，this.name取的是person.name，所以打印出来的名字就是zero了，后面的为age和job，只是参数传递的方式不一样，apply比较特殊，把要传的参数放在数组里面
  // 而bind和以上两种有区别，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对象，获取到的文档节点等，并没有数组的那些方法：

   Array.prototype.slice.apply（argument）; //理论上来说这个比较快，直接在原型上查找slice方法
                                                             //但实际上比较慢

或者

    [].slice.apply(arguments); //理论上来说这个比较慢，因为要Array做一个实例化再查找slice方法
                                    //实际上比较快，因为现在的各种自动化工具会把上一种方法转换为这种，而第二种代码比较简洁，所以会比较快；

bind（）--也是改变函数体内this的指向;
bind会创建一个新函数，称为绑定函数，当调用这个函数的时候，绑定函数会以创建它时传入bind（）方法的第一个参数作为this，传入bind（）方法的第二个及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数；

bind与apply、call最大的区别就是：bind不会立即调用，其他两个会立即调用
例子：

• 三个的使用区别：
  • 都是用来改变函数的this对象的指向的；
  • 第一个参数都是this要指向的对象；
  • 都可以利用后续参数传参；
  • 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表示触发此事件的DOM对象。
setTimeout(function(){
    console.log(this);     //  输出window对象,setTimeout、setInterval这两个方法执行的函数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指的是触发此事件的DOM对象，不是module。
      this.showMsg();  ////由于this是$btn，所以在执行这句是会报错。
    })
 },

  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();  //此时相当于执行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在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做proto的内置属性，用于指向创建它的函数对象的原型对象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、下面两种写法有什么区别? **####

//方法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这个方法作为构造函数方法,在创建P1实例的时候相当于又重新拷贝了一个printName方法.
• 方法二printName这个方法作为原型链方法,创建P1实例的时候相当于借用原型的printName方法.
  • 推荐使用第二种。方法2把通用的方法写在原型对象中，每一个实例都能去引用该方法，节约了空间。

** 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

** 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();

学习提示
this 的值到底是什么？
JS 的 new 到底是干什么的？