你知道多少this,new,bind,call,apply?那我告诉你

2019-11-14 17:43:38 浏览数 (2)

那么什么是this,new,bind,call,apply呢?这些你都用过吗?掌握这些内容都是基础中的基础了。如果你不了解,那还不赶快去复习复习,上网查阅资料啥的!

通过call,apply,bind可以改变this的指向,this指向一般指向它的调用者,默认挂载在window对象下。es6中的箭头函数中,this指向创建者,并非调用者。

代码语言:javascript复制
const func = function () {
    console.log(this);
    const func2 = function () {
      console.log(this);
    };
    func2(); //Window
  };
  func(); //Window
代码语言:javascript复制
'use strict'
  const func = function () {
    console.log(this);
    const func2 = function () {
      console.log(this);
    };
    func2(); //undefined
  };
  func(); //undefined
代码语言:javascript复制
var a = 2

var obj = {
    a: 4,
    foo:() => {
        console.log(this.a)
    
        function func() {
            this.a = 7
            console.log(this.a)
        }
    
        func.prototype.a = 5
        return func
    }
}

var bar = obj.foo()        
// 浏览器中输出: 2
bar()                      
// 浏览器中输出: 7
new bar()                  
// 浏览器中输出: 7

一般函数方法中使用this指向全局对象:

代码语言:javascript复制
function test(){
   this.x = 1
  console.log(this.x)
}

test()  
// 1

作为构造函数调用,this指向new实例化的对象:

代码语言:javascript复制
function test(){
  this.x = 1
}

var o = new test()
alert(o.x)  
// 1

第一,this的学习,需要掌握哪些呢?this最重要的就是其指向的类型,那么在JavaScript中应该如何确定this的指向呢?

this是在函数被调用时确定的,它的指向完全取决于函数调用的地方,而不是它被声明的地方。(除了箭头函数)记住一点:this始终指向调用它的对象,对象中的方法中的this,指向调用它的对象。

代码语言:javascript复制
var obj = {
 a: 1,
 b: {
  a: 2,
  func: function() {
   console.log(this.a); // 输出结果为2
   console.log(this); // 输出结果是b对象
  }
 }
}

// 调用
obj.b.func();
代码语言:javascript复制
var obj = {
 a: 1,
 b: {
  func: function() {
   console.log(this.a); // undefind
   console.log(this); // b对象
  }
 }
}

// 调用
obj.b.fun();

改变调用方法,不直接调用:

代码语言:javascript复制
var obj = {
 a: 1,
 b: {
  a: 2,
  func: function() {
   console.log(this.a); // undefined 若在对象obj外定义a,则输出的就是其在外定义的值
   console.log(this); // window
  }
 }
}

var j = obj.b.func; 
// 只是将b对象下的方法赋值给j,并没有调用
j(); 
// 调用,绑定的对象是window,并非b对象直接调用

在绝大多数情况下,函数的调用方式决定了this的值,this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。this指向的对象称为函数的上下文对象context,this的指向取决于函数被调用的方式。

代码语言:javascript复制
function foo() {
 console.log(this);
}

那么我来问你?this指向哪里?哈哈哈,应该时不知道吧,因为谁调用指向谁,函数都没被调用,确实不知道指向。

代码语言:javascript复制
function foo() {
 console.log(this);
}
// window全局对象
> undefined

// obj对象
var obj = {
 foo: foo
}
obj.foo();
> {foo:f}

直接通过函数名来调用函数,this指向全局变量window,通过对象,函数名调用函数,this指向该对象。当一个函数被调用的时候,会创建一个执行的上下文,它包含函数在哪里被调用,函数的调用方式,传入的参数等信息。

this的使用场景:

作为构造函数被new调用,作为对象的方法使用,作为函数直接调用,被call,apply,bind调用,箭头函数中的this。

基础:函数内部this指向问题:

代码语言:javascript复制
var myObj = {
 foo: "bar",
 func: function() {
  var self = this;
  console.log(this.foo);
  console.log(self.foo);
  (function() {
   console.log(this.foo);
   console.log(self.foo);
  }());
 }
}

myObj.func();

结果:

代码语言:javascript复制
bar
bar
undefined
bar

在对象方法中调用时:

代码语言:javascript复制
var location = {
 x: 0,
 y: 0,
 move: function(x,y) {
  this.x = this.x   x;
  this.y = this.y   y;
  console.log(this.x); // 1
  console.log(this.y); // 1
 }
};

location.move(1,1) 
// this绑定到当前对象,即为location对象

作为函数调用时:

代码语言:javascript复制
function func(x) {
 this.x = x;
}

func(2); 
// 函数被调用时,this绑定的时全局对象window,相当于直接声明了一个全局变量x
console.log(x); 
// x已经成为一个值为5的全局隐式变量

对象中this的指向问题:

代码语言:javascript复制
var a = 1;

function printA() {
 console.log(this.a);
}

var obj = {
 a: 2,
 foo: printA,
 bar: function() {
  printA();
 }
}

obj.foo(); // 2
obj.bar(); // 1
var foo = obj.foo;
foo(); // 1

this的指向不是函数声明时绑定的,而是在函数运行过程中动态绑定的。

前端笔试:

代码语言:javascript复制
    function a(xx) {
        this.x = xx;
        return this;
    }

    var x = a(5);
    var y = a(6);

    console.log(x.x);    //undefined
    console.log(y.x);    //6

file

基础:new绑定,显式绑定,隐式绑定,默认绑定,this绑定的优先级,箭头函数中的this。

箭头函数中的this是根据其声明的地方来决定this的,它是ES6中出现的知识点,箭头函数中的this,是无法通过call,apply,bind被修改的,且因箭头函数没有构造函数constructor,导致也不能用new调用,就不能作为构造函数了,否则会出现错误。

箭头函数不能arguments,super,this或new.target定义本地绑定。箭头函数中对arguments,super,this或new.target的任何引用都解析为当前所在词法作为域中的绑定,通常,这就是箭头函数所在函数作用域。

this在不同场景中的指向:

代码语言:javascript复制
// 匿名函数中的this指向全局对象
var a = 2;

var func = {
 a: 4,
 fn: (function() {
  console.log(this); // window
  console.log(this.a); // 2
 })()
}
代码语言:javascript复制
// setInterval和setTimeout定时器中的this指向全局对象
var a = 2;

var oTimer = setInterval(function(){
 var a = 3;
 console.log(this.a); // 2
 clearInterval(oTimer);
},100);
代码语言:javascript复制
// eval中的this指向调用上下文中的this
(function() {
 eval("console.log(this)"); // window
})();

function Foo() {
 this.bar = function(){
  eval("console.log(this)"); // Foo
 }
}

var foo = new Foo();
foo.bar();
代码语言:javascript复制
// apply 和 call中的this指向参数中的对象
var a = 2;

var foo = {
 a: 20,
 fu: function(){
  console.log(this.a);
 }
};

var bar = {
 a: 200
}

foo.fu.apply(); // 2(若参数为空,默认指向全局对象)
foo.fu.apply(foo); // 20
foo.fu.apply(bar); // 200

this绑定的优先级:优先级:new绑定 > 显示绑定 > 隐式绑定 > 默认绑定

new绑定:函数中有new的调用,this绑定的是新创建的对象 显示绑定:函数中有bind,apply,call调用,this绑定的是指定的对象 隐式绑定:函数中是否在某个上下文对象调用,this绑定的是那个上下文对象 默认绑定:在严格模式下,就绑定到undefined,否则绑定到全局对象

new绑定:函数使用new调用时,this绑定的是新创建的构造函数的实例

代码语言:javascript复制
function func() {
 console.log(this)
}

var bar = new func() 
// func实例,this就是bar

重点,创建一个新对象,构造函数的prototype被赋值给这个新对象的proto,将新对象赋给当前的this,执行构造函数,如果函数没有返回其他对象,那么new表达式中的函数会自动返回这个新对象。

显示绑定:call,apply,bind可以用来修改函数绑定的this

代码语言:javascript复制
function fn (name, price){
 this.name = name
 this.price = price
}

function Food(category, name, price) {
 fn.call(this, name, price) // call方式调用
 // fn.apply(this, [name,price]) // apply方式调用
 this.category = category
}

new Food('水果','苹果','6');

call和apply的区别:

call方法接受的是参数列表 apply方法接受的是参数数组

代码语言:javascript复制
fu.call(this, arg1, arg2, ...) // call

fu.apply(this, [arg1,arg2, ...]) // apply
代码语言:javascript复制
func.bind(thisArg[, arg1[, arg2[, ...]]])    
// bind 用法

隐式绑定:函数是否在某个上下文对象中调用,如果是,this绑定的是那个上下文对象。

代码语言:javascript复制
var a = 'hello5'
var obj = {
    a: 'world',
    foo: function() {
        console.log(this.a)
    }
}
obj.foo()       
// 浏览器中输出: "world"
代码语言:javascript复制
var a = 'hello555'
var obj = {
    a: 'world555',
    b:{
        a:'Ch',
        foo: function() {
            console.log(this.a)
        }
    }
}
obj.b.foo()     
// 浏览器中输出: "Ch"

默认绑定:

代码语言:javascript复制
var a = 'hello'
function foo() {
    var a = 'world'
    console.log(this.a)
    console.log(this)
}
foo()             
// 相当于执行 window.foo()
// 浏览器中输出: "hello"
// 浏览器中输出: Window 对象
代码语言:javascript复制
var a = 'hello'
var obj = {
    a: 'world55',
    foo: function() {
        console.log(this.a)
    }
}
var bar = obj.foo
bar()              
// 浏览器中输出: "hello"
代码语言:javascript复制
var a = 'hello'
var obj = {
    a: 'world55',
    foo: function() {
        console.log(this.a)
    }
}
function func(fn) {
    fn()
}
func(obj.foo)              
// 浏览器中输出: "hello"

0 人点赞