this_原型链_继承

由于运行期绑定的特性，JavaScript 中的 this 含义非常多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，<strong>那就是this指的是，调用函数的那个对象。</strong>

什么是this？

方老师讲的很好，这边我就不重复了
https://zhuanlan.zhihu.com/p/23804247?refer=study-fe

什么是apply，call？

语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])

定义：参数 thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN 可选项。将被传递方法参数序列。

说明 :
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
　　如果没有提供 thisObj 参数，那么 Global 对象被用作thisObj。说明白一点其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

语法：apply([thisObj[,argArray]])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
　　如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
　　如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

下面是测试this熟悉程度的题目：

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() //输出John： hi! this是用john这个对象调用的，所以this===johN.firstName

func() 
function func() { 
  alert(this)  //直接调用函数，obj为window对象
}

document.addEventListener('click', function(e){
    console.log(this); //document调用addEventListener方法，所以this的obj为document
    setTimeout(function(){
        console.log(this); //setTimeout内调用匿名函数，obj为window
    }, 200);
}, false);

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john) //将func中的this对象设置为john

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指向$btn的原生DOM
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

原型链相关问题

1.有如下代码，解释Person、 prototype、proto、p、constructor之间的关联。
Person是原型，P是Person的实例，Person的prototype定义了sayName 方法，P根据proto原型链查找sayName方法，Person的prototype方法上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();

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

Paste_Image.png

通过原型链查到object原型，里面有toString()方法

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

<script>
String.prototype.getMostOften = function() {
     var obj = {},tmp = [0];
     for (var i = 0; i < this.length; i++) {
        if(obj[this[i]]){
            obj[this[i]]++
        }
        else if(!obj[this[i]]){
            obj[this[i]]=1;
        }
     }
    for(var key in obj){
        if(obj[key]>tmp[0]){
            tmp[0]=obj[key];
            tmp.key=key;
        }
    }
    return('出现最多的是：'+tmp.key+' num： '+tmp);
   };
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
</script>

4.instanceOf有什么作用？内部逻辑是如何实现的？
判断一个实例的原型是谁

function instanceOf(obj,fn){
  var oldpro = obj.__proto__;
  while(oldpro){
    if(oldpro === fn.prototype){
        return true;
    }else{
        oldpro = oldpro.__proto__;
    }
  }
  return false;
}

继承相关问题：

1.什么是继承？继承有什么用？
概念：继承是指一个对象直接使用另一个对象的属性和方法。
作用：继承划分了类的层次性，父类代表的是更一般、更泛化的类，而子类则是更为具体、更为细化；
继承是实现代码重用、扩展软件功能的重要手段，子类中与父类完全相同的属性和方法不必重写，只需写出新增或改写的内容，这就是说子类可以复用父类的内容，不必一切从零开始。

2.下面两种写法有什么区别?

//方法1,直接在原型中写入方法，在创建P1实例的时候相当于又重新拷贝了一个printName方法
function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('饥人谷', 2)

//方法2，通过原型链创建方法，创建P1实例的时候相当于借用原型的printName方法
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('若愚', 27);

3.Object.create 有什么作用？兼容性如何？
Object.create创建一个具有指定原型且可选择性地包含指定属性的对象。可以通过Object.create()方法实现类式继承，如：

Male.prototype = Object.create(Person.prototype);

通过Object.create()clone了一个新的prototype，使Male.prototype指向这个新的prototype，而不是直接将Person.prototype赋值给它，这样做可以避免当我修改Male.prototype的时候不会将它的父类Person.prototype也修改了。

4.hasOwnProperty有什么作用？ 如何使用？
hasOwnPerperty是Object.prototype的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性，hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数。

5.如下代码中call的作用是什么?

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //修改this指向的对象，借用Person的name和sex属性
    this.age = age;
}

6.补全代码，实现继承

function Person(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName=function(){
        console.log('Hello, '+name);
    }
}

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

function inherit(superType, subType){   //添加constructor地址，指向Male
    var _prototype  = Object.create(superType.prototype);
    _prototype.constructor = subType;
    subType.prototype = _prototype;
}
inherit(Person, Male);

Male.prototype.getAge = function(){
    console.log('my age is ' + this.age)
};

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

这道题目能很好的去理解原型链，this，和继承

Paste_Image.png