JS-this指向，原型原型链，applay、call、bind的用法和区别

---

JS-this指向，原型原型链，applay、call、bind的用法和区别

1. this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话不那么严谨，作为一般情况下是可以的）

再加下面的补充：

情况1： 如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window(在严格版中的默认的this不再是window，而是undefined。)

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a(); //相当于window.a();
//this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的

情况2： 如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
        console.log(this); //{user: "追梦子", fn: ƒ}
    }
}
o.fn(); //this执行时被它的上一级对象o{user: "追梦子", fn: ƒ}调用

情况3： 如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

var o = {
    a:10,
    b:{
        //a:12,
        fn:function(){
            console.log(this.a); //undefind  有两个对象b和o,所以此this.a指向它的上一级b
        }
    },
    fn1:function(){
        console.log(this.a);  //10 
    }
}
o.fn1();   //10 
o.b.fn();   //undefind

另外还有两种种特殊情况：

第一种： 当this遇到return

function fn()  
{  
    this.user = '追梦子';  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined

function fn()  
{  
    this.user = '追梦子';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined

function fn()  
{  
    this.user = '追梦子';  
    return 1;
}
var a = new fn;  
console.log(a.user); //追梦子

function fn()  
{  
    this.user = '追梦子';  
    return undefined;
}
var a = new fn;  
console.log(a.user); //追梦子

function fn()  
{  
    this.user = '追梦子';  
    return null;
}
var a = new fn;  
console.log(a.user); //追梦子

总结： 如果返回值是一个对象或函数，那么this指向的就是那个返回的对象或函数，如果返回值不是一个对象那么this还是指向函数的实例。
还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

第二种：this永远指向的是最后调用它的对象

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();

这里this指向的是window!!!
总结：this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，第二种情况中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行，所以最终指向的是window

2.applay、call、bind的用法和区别

call、apply、bind都属于Function.prototype的方法

2.1 call方法

call方法： 调用一个对象的一个方法，以另一个对象替代当前的对象。其实就是更改对象的内部指针，即改变对象this的指向

语法：Function.call(thisArg, arg1, arg2, …)

代码示例：

      var foo = {
        a: 1,
        fn: function (x, y) {
          console.log(this.a, x, y)
        }
      }
      var obj1 = {
        a: 2
      }
      foo.fn.call(obj1, 2, 3) // 2 2 3

2.2 apply方法

**apply方法: **apply与call作用一样，只不过第二个参数不同

语法：Function.apply(thisArg, [argsArray])

代码示例：

      var foo = {
        a: 1,
        fn: function (x, y) {
          console.log(this.a, x, y)
        }
      }
      var obj1 = {
        a: 2
      }
      foo.fn.apply(obj1, [2, 3]) // 2 2 3

2.3 bind方法

**bind方法: **将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被指定为bind()中的第一个参数的值

语法：Function.bind(thisArg, arg1, arg2, …)

代码示例：

      var foo = {
        a: 1,
        fn: function (x, y) {
          console.log(this.a, x, y)
        }
      }
      var obj1 = {
        a: 2
      }
      foo.fn.bind(obj1, 2, 3)() // 2 2 3

**区别：**三者作用一样，call和apply的第二个参数不一样；bind会返回一个函数，需要再次调用。

3. 原型、原型链

原型要点：

• 所有的引用类型（数组、函数、对象）可以自由扩展属性（除null以外）。

• 所有的引用类型都有一个’_ _ proto_ _'属性(也叫隐式原型，它是一个普通的对象)。

• 所有的函数都有一个’prototype’属性(这也叫显式原型，它也是一个普通的对象)。

• 所有引用类型，它的’_ _ proto_ _'属性指向它的构造函数的’prototype’属性。

• 当试图得到一个对象的属性时，如果这个对象本身不存在这个属性，那么就会去它的’_ _ proto_ _'属性(也就是它的构造函数的’prototype’属性)中去寻找。

3.1 原型

例子:

		//这是一个构造函数
		function Foo(name,age){
			this.name=name;
			this.age=age;
		}
		/*根据要点3，所有的函数都有一个prototype属性，这个属性是一个对象
		再根据要点1，所有的对象可以自由扩展属性
		于是就有了以下写法*/
		Foo.prototype={
			// prototype对象里面又有其他的属性
			showName:function(){
				console.log("I'm "+this.name);//this是什么要看执行的时候谁调用了这个函数
			},
			showAge:function(){
				console.log("And I'm "+this.age);//this是什么要看执行的时候谁调用了这个函数
			}
		}
		var fn=new Foo('小明',19)
		/*当试图得到一个对象的属性时，如果这个对象本身不存在这个属性，那么就会去它
		构造函数的'prototype'属性中去找*/
		fn.showName(); //I'm 小明
		fn.showAge(); //And I'm 19

这就是原型，很好理解。那为什么要使用原型呢？

试想如果我们要通过Foo()来创建很多很多个对象，如果我们是这样子写的话：

function Foo(name,age){
		this.name=name;
		this.age=age;
		this.showName=function(){
			console.log("I'm "+this.name);
		}
		this.showAge=function(){
			console.log("And I'm "+this.age);
		}
	}

那么我们创建出来的每一个对象，里面都有showName和showAge方法，这样就会占用很多的资源。
而通过原型来实现的话，只需要在构造函数里面给属性赋值，而把方法写在Foo.prototype属性(这个属性是唯一的)里面。这样每个对象都可以使用prototype属性里面的showName、showAge方法，并且节省了不少的资源。

3.2原型链

根据要点5，当试图得到一个对象的属性时，如果这个对象本身不存在这个属性，那么就会去它构造函数的’prototype’属性中去寻找。那又因为’prototype’属性是一个对象，所以它也有一个’_ _ proto_ _'属性。

那么我们来看一个例子：

	// 构造函数
	function Foo(name,age){
	 	this.name=name;
	 	this.age=age;
	}
	Object.prototype.toString=function(){
		//this是什么要看执行的时候谁调用了这个函数。
		console.log("I'm "+this.name+" And I'm "+this.age);
	}
	var fn=new Foo('小明',19);
	fn.toString(); //I'm 小明 And I'm 19
	console.log(fn.toString===Foo.prototype.__proto__.toString); //true
	
	console.log(fn.__proto__ ===Foo.prototype)//true
	console.log(Foo.prototype.__proto__===Object.prototype)//true
	console.log(Object.prototype.__proto__===null)//true

分析：

首先

var fn=new Foo('小明',19);

fn的构造函数是Foo()。所以：依据：所有引用类型，它的’_ _ proto_ _'属性指向它的构造函数的’prototype’属性

fn.__proto__=== Foo.prototype

因为Foo.prototype是一个普通的对象，它的构造函数是Object，所以：

Foo.prototype._ _ proto _ _=== Object.prototype

通过上面的代码，我们知道这个toString()方法是在Object.prototype里面的，当调用这个对象的本身并不存在的方法时，它会一层一层地往上去找，一直到null为止。所以当fn调用toString()时，JS发现fn中没有这个方法，于是它就去Foo.prototype中去找，发现还是没有这个方法，然后就去Object.prototype中去找，找到了，就调用Object.prototype中的toString()方法。

这就是原型链，fn能够调用Object.prototype中的方法正是因为存在原型链的机制。

另外，在使用原型的时候，一般推荐将需要扩展的方法写在构造函数的prototype属性中，避免写在_ _ proto _ _属性里面

个toString()方法是在Object.prototype里面的，当调用这个对象的本身并不存在的方法时，它会一层一层地往上去找，一直到null为止。所以当fn调用toString()时，JS发现fn中没有这个方法，于是它就去Foo.prototype中去找，发现还是没有这个方法，然后就去Object.prototype中去找，找到了，就调用Object.prototype中的toString()方法。

这就是原型链，fn能够调用Object.prototype中的方法正是因为存在原型链的机制。

另外，在使用原型的时候，一般推荐将需要扩展的方法写在构造函数的prototype属性中，避免写在_ _ proto _ _属性里面