在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分。每次调用函数,都会产生一个新的执行上下文环境。

this的指向

1、构造函数

  1. //1、 构造函数时,this指的是的 即将new出来的对象。(在构造函数的prototype,甚至在整个原型链中,this代表的都是当前对象的值。)
  2. var name = "hahaha";
  3. function Foo() {
  4. this.name = "lishuge";
  5. this.year = 1997;
  6. console.log(this); //Foo {name: "lishuge", year: 1997}
  7. }
  8. var a = new Foo();
  9. console.log(a)//Foo {name: "lishuge", year: 1997}
  10. Foo(); //Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
  11. //直接调用函数就是window
  12. /* ------------------------------------------- */
  13. Foo.prototype.getName=function(){
  14. console.log(this.name);
  15. }
  16. var f1=new Fn();
  17. f1.getName(); //lishuge


2、函数作为对象的一个属性

  1. //2、函数作为对象的一个属性。结果this就是obj对象。
  2. var f1 = {
  3. x: 10,
  4. f2: function () {
  5. console.log(this), //{x: 10, f2: ƒ}
  6. //2. Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
  7. console.log(this.x) //10 //2. undefined
  8. }
  9. }
  10. f1.f2();//调用语句
  11. /* ---------------------*/
  12. // 如果fn函数被赋值到了另一个变量中,并没有作为obj的一个属性被调用,那么this的值就是window,
  13. // this.x为undefined。
  14. var a = f1.f2;
  15. a()


3、函数被call 或者apply调用时。

  1. //当一个函数被call和apply调用时,this的调用值就取传入的对象。
  2. var obj={
  3. x=10;
  4. }
  5. var fn=function (){
  6. console.log(this); //object {x:10}
  7. console.log(this.x); //10
  8. }
  9. fn.call(obj)

4、全局 和调用普通函数

  1. //在全局作用下,this永远是window。
  2. console.log(this==window) //true
  3. //普通函数在调用时,其中的this也都是window
  4. var x=10;
  5. var fn=function (){
  6. console.logthis //Window
  7. console.log(this.x) //10
  8. }
  9. fn()

改变this指向的方法

  1. call语法:function.call(thisArg,arg1,arg2,...);
  2. apply语法:function.apply(thisArg, [ ]);
  3. bind语法:function.bind(thisArg[,arg1[,arg2[,...]]]) { function.bind(fun(param)) }

1.bind

改变了函数内部this执行的上下文环境

  1. var name="wang"; //全局变量 是window下的属性
  2. var obj={
  3. name:"li"
  4. }
  5. var test=function(){
  6. console.log(this.name) //this指向了obj 输出结果为li
  7. }.bind(obj);
  8. test()
  9. 如果不使用bind()
  10. /*var test=function(){
  11. console.log(this.name) //test是window下的方法 实际是window.name 输出wang
  12. }
  13. test()
  14. */

2.call

改变了函数this的指向,函数调用的时候执行

  1. <script>
  2. /* call改变函数this的指向,函数调用的时候执行
  3. */
  4. var name="wang";
  5. var obj={
  6. name:"li"
  7. }
  8. var test=function(){
  9. console.log(this.name) //li
  10. }
  11. test.call(obj)
  12. </script>

2.1call(thisObj,parmas)的两个传参

  1. call(thisObj,params)
  2. //第一个参数指向函数内部的this,之后的参数是需要被传入函数的参数
  1. <script>
  2. /* call(thisObj改变this对象,params传递的参数) */
  3. function sayName(label){
  4. console.log(label+":"+this.name)
  5. }
  6. var name="zhang";
  7. var cheng={
  8. name:"cheng"
  9. }
  10. var wang={
  11. name:"wang"
  12. }
  13. sayName("window") //window:zhang
  14. sayName.call(cheng,"男孩子") //男孩子:cheng
  15. sayName.call(wang,"女孩子") //女孩子:wang
  16. </script>

3.apply

fun.apply(thisArg, [argsArray])传递的是数组
  1. <script>
  2. function go(name,age){
  3. console.log(this.name+":"+this.age)
  4. // console.log(name)
  5. // console.log(age)
  6. }
  7. go("cheng",18) //undefined
  8. var li={
  9. name:"李晓",
  10. age:23
  11. }
  12. var zhang={
  13. name:"张晓",
  14. age:23
  15. }
  16. go.apply(li,["li",24]) //李晓:23
  17. go.call(zhang,"zhang",111) //张晓:23
  18. </script>

三者的区别?

call和apply改变了函数的this上下文后便执行该函数,而bind则是返回改变了上下文后的一个函数;
call,apply的区别:

  • 他们俩之间的差别在于参数的区别,call和apply的第一个参数都是要改变上下文的对象,
  • 而call从第二个参数开始以参数列表的形式展现,
  • apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数