this、原型链、继承@慕课网原创_慕课网

深入详解javascript之delete操作符
 深入javascript(六)：instanceof 运算符
 重新理解JS的6种继承方式
 JS 的 new 到底是干什么的？

1.apply、call 、bind有什么作用，什么区别

这三个函数主要作用在于改变this的指向。

call：传递一个thisArgs参数和一个参数列表，thisArgs 指定了函数在运行期的调用者，也就是函数中的 this 对象，而参数列表会被传入调用函数中,如：

var a = {

     name:'onepixel', //定义a的属性

    say:function(){ //定义a的方法
        console.log("Hi,I'm function a!");
    }
};function b(name){
    console.log("Post params: "+ name);
    console.log("I'm "+ this.name);
    this.say();
}

b.call(a,'test');
>>>
Post params: test
I'm onepixel
I'm function a!

apply：和call效果相似，只是第二个参数传递的是数组

 function b(x,y,z){   console.log(x,y,z);
 }
 b.apply(null,[1,2,3]); // 1 2 3

bind：ES5引入 bind 的真正目的是为了弥补 call/apply 的不足，由于 call/apply 会对目标函数自动执行，从而导致它无法在事件绑定函数中使用，因为事件绑定函数不需要我们手动执行，它是在事件被触发时由JS 内部自动执行的。而 bind 在实现改变函数 this 的同时又不会自动执行目标函数
var obj = {name:'onepixel'};

/**
* 给document添加click事件监听，并绑定onClick函数
* 通过bind方法设置onClick的this为obj，并传递参数p1,p2
*/
 document.addEventListener('click',onClick.bind(obj,'p1','p2'),false); //当点击网页时触发并执行
 function onClick(a,b){     console.log(           this.name, //onepixel
           a, //p1
           b  //p2
     )
 }

2.以下代码输出什么?

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

3.下面代码输出什么，为什么

  func() 
  function func() { 
    alert(this)
  }    //代码输出为window

因为func函数为全局变量，相当于window.func() 或者是 func.call(undefined)

4.下面代码输出什么

  document.addEventListener('click', function(e){      console.log(this);    //  这个this为document
      setTimeout(function(){          console.log(this);    // setTimeout、setInterval函数的全局对象为window
      }, 200);
  }, false);

5.下面代码输出什么，why

  var john = { 
      firstName: "John" 
  }  function func() { 
      alert( this.firstName )
  }
  func.call(john)    //  John

因为使用了call方法，该方法将func的this转向为john

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

  var module= {    var _this = this   //  将this赋值给_this
    bind: function(){
      $btn.on('click', function(){        console.log(this)   //  this 指 $btn
        this.showMsg();    //  修改为_this.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();

Person是一个构造函数，当new Person()的时候会创建一个空对象，然后将空对象的__proto__指向prototype，再将返回值赋值给p(实例对象)，对象的constructor属性用于返回创建该对象的函数，也就是我们常说的构造函数

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

p.toString()方法是继承构造函数Object的原型对象里定义的toString方法，首先p会找自己的toString方法，如果没有找到，会沿着__proto__属性继续到构造函数Person的prototype里找toString方法，如果还未找到，再继续往Person.prototype的__proto__即Object.prototype找toString方法，最后找到toString()方法。
原型链：由于原型对象本身也是对象，而每个javascript对象都有一个原型对象，每个对象都有一个隐藏的proto属性，原型对象也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链。在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined。原型链一般实现为一个链表，这样就可以按照一定的顺序来查找。

3704824-d6cbc01eac70a205.png

9.对String做扩展，实现如下方式获取字符串中频率最高的字符

    // 方法一： 
    String.prototype.getMostOften = function(){        var obj = {};        for(var i = 0; i < this.length; i++){            if(obj[this[i]]){
                obj[this[i]]++;
            }else{
                obj[this[i]] = 1;
            }
        }        var count = 0,key;        for(var k in obj){            if(obj[k] > count){
                count = obj[k];
                key = k
            }
        }        return key + '，出现次数：' + count
    }    
    var str = 'ahbbccdeddddfg';    var ch = str.getMostOften();    console.log(ch); //d , 因为d 出现了5次

    //  方法二：
    String.prototype.getMostOften = function(){        var arr = this.split('');        var obj = arr.reduce(function(init,value){            if(init[value]){
                init[value]++;
            }else{
                init[value] = 1;
            }            return init;
        },{})        var count = 0,key;        for(var k in obj){            if(obj[k] > count){
                count = obj[k];
                key = k;
            }
        }        return key + '，出现次数：' + count
    }    
    
    var str = 'ahbbccdeddddfg';    var ch = str.getMostOften();    console.log(ch);

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

instanceof运算符可以用来判断某个构造函数的prototype属性是否存在另外一个要检测对象的原型链上。

  function instanceOf(obj,fn){    var oldpro = obj.__proto__;    while(oldpro){      if(oldpro === fn.prototype){          return true;          break;
      }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方法，方法1的printName方法是在函数Person实例对象里的，方法2是在Person的prototype对象上的。当再创建一个Person实例对象的时候，方法1又将会再创建一个printName方法，占用新的内存，而方法2将一个公用的printName方法写在原型上，当对象要使用该方法只需到原型链里调用就可以了，达到节省内存的效果

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

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

不支持IE8以下浏览器

function Person(name, age){    this.name = name;    this.age = age;
}
Person.prototype.sayName = function(){    console.log(this.name);
}function Male(name, age, sex){
    Person.call(this, name, age);    this.sex = sex;
}// Male.prototype = new Person(); //该方法同下，代替不兼容Object.create()的使用场景Male.prototype = Object.create(Person.prototype);
Male.prototype.constructor = Male;
Male.prototype.sayAge = function(){      console.log(this.age);
};var p1 = new Male('hunger', 20, 'nan');
p1.sayName();//hungerp1.sayAge();//20

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

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

此方法不会检查对象的原型链中是否存在该属性，该属性只有是对象本身的一个成员才会返回true

function Site(){    this.name = "CodePlayer";    this.url = "http://www.365mini.com/";    this.sayHello = function(){        document.writeln("欢迎来到" + this.name);
    };
}var obj = {    engine: "PHP",    sayHi: function(){        document.writeln("欢迎访问" + this.url);
    }
};// 使用对象obj覆盖Site本身的prototype属性Site.prototype = obj;var s =  new Site();document.writeln( s.hasOwnProperty("name") ); // truedocument.writeln( s.hasOwnProperty("sayHello") ); // true// 以下属性继承自原型链，因此为falsedocument.writeln( s.hasOwnProperty("engine") ); // falsedocument.writeln( s.hasOwnProperty("sayHi") ); // falsedocument.writeln( s.hasOwnProperty("toString") ); // false// 想要查看对象(包括原型链)是否具备指定的属性，可以使用in操作符document.writeln( "engine" in s ); // truedocument.writeln( "sayHi" in s ); // truedocument.writeln( "toString" in s ); // true

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

call的作用是将构造函数Person的this指向Male，使得Male拥有Person的属性

16.补全代码，实现继承

    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.prototype = Object.create(Person.prototype);
    Male.prototype.constructor = Male    // 兼容写法：
    // function Temp(){}
    // Temp.prototype = Person.prototype
    // Male.prototype = new Temp()

    Male.prototype.getAge = function(){        console.log('My age is' + this.age)
    };    var ruoyu = new Male('若愚', '男', 27);
    ruoyu.printName();

作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/a14c5fe52c0f

this、原型链、继承