改变this的指向

时间: 2019-02-28阅读: 760标签: this

this是JavaScript语言的一个关键字。

它代表函数运行时,自动生成的一个内部对象。比如,

function test()  {
     this.x = 1;
}

this 是当前执行上下文中的一部分。

this永远指向函数的调用者。
随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。


1.this指向的形式4种

a.如果是一般函数,this指向全局对象window;

b.在严格模式下"use strict",为undefined.

c.对象的方法里调用,this指向调用该方法的对象.

d.构造函数里的this,指向创建出来的实例.

e.在事件处理函数中,this指向触发事件的DOM对象

//a
function bar() {
    console.log(this);//一般函数,this指向全局对象window
}
bar();

//b
var foo = function() {
    "use strict";
    console.log(this);//表示使用严格模式;在严格模式下,为undefined
}
foo();

//c
var name = 'tesla';
var car = {
    name:"bmw",
    drive: function() {
        console.log(this); //object car
        console.log(this.name); //bmw

        var that = this;//定义一个that变量来存储this的值

        setTimeout(function(){ //setTimeout是全局函数
            console.log(this); //window
            console.log(this.name); //tesla

            console.log(that); //object car
            console.log(that.name); //bmw
        },1000);
    }
}
car.drive();

//d
var name = 'tom';
//声明一个函数
function person() {
    console.log(arguments.length);
    this.name = arguments[0];
    this.age = arguments[1];
    console.log(this);
    console.log(this.name);
    console.log(this.age);
}
person(); //0 window undefined undefined
var tom = new person('amy',20);  //2 person -> tom amy 20

//e
//先遍历 '.tr-s'
$('.tr-s').each(function (index,item) {
    //再遍历 '.tr-s' 下的 'td-t'
    $(this).find('.td-t').each(function (index_s,item_s) {
        //index_s 是下标
        //item_s 是对应的对象
    })
})


2.改变this的指向

js中一切皆对象,函数也是对象,既然是对象就有属性和方法,在js中所有的方法都有两个方法call(),apply()

我们可以使用这两个方法来显示更改函数中this的指向,
call、apply这两个函数的共同特点:改变并立即执行。

区别就是传参方式不同
call是一个一个传入
apply是传入一个数组,一次性传完。

.call(), call(thisScope, arg1, arg2, arg3...)

.apply(), apply(thisScope, [arg1, arg2, arg3...]);两个参数

在ES5中新增了bind(),该方法也是强制更改this指向

而bind 改变this的指向,返回的是函数

.bind() bind(thisScope, arg1, arg2, arg3...)

但是bind和call、apply的区别是bind更改this后不会立即执行,它会返回一个新函数。

bind传参也是一个一个的传入

var obj = {
    name:'tom',
    age:20
}

function show(a,b){
    console.log(a,b);
}

//独立调用
show(1,2);

//强制更改this指向为obj 并立即执行该函数
show.call(obj,1,2);
show.apply(obj,[1,2]);

//强制更改this指向obj,不会立即执行,它会返回一个新函数,需要主动去执行这个函数
show.bind(obj,1,2)();



箭头函数的this

我们使用foo函数的call方法改变了foo函数调用时函数体内this的指向({id: 42}这个对象),但setTimeout回调函数中的this依旧指向window对象(因为在全局环境中运行)。


普通函数

function foo() {
    console.log("id1:", this.id);
    console.log("this1:", this);
    setTimeout(function() {
        console.log("id2:", this.id);
        console.log("this2:", this);
    }, 0);
}

var id = 21;

foo();
// id1: 21 ; this1: window ; id2: 21 ; this2: window

foo.call({id: 42});
// id1: 42 ; this1: {id: 42} ; id2: 21 ; this2: window


箭头函数

function foo() {
    console.log("id1:", this.id);
    console.log("this1:", this);
    setTimeout(() =>{
        console.log("id2:", this.id);
        console.log("this2:", this);
    }, 0);
}

var id = 21;

foo();
// id1: 21 ; this1: window ; id2: 21 ; this2: window

foo.call({id: 42});
// id1: 42 ; this1: {id: 42} ; id1: 42 ; this1: {id: 42}

在这里直接给出结论:
箭头函数根本没有自己的this,导致内部的this指向了外层代码的this,这个指向在定义时就已经确定而不会在调用时指向其执行环境的(变量)对象。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2148

关闭

JS匿名函数this调用变量报错

突然,看到附件选择的方法,人家是设置的this.fileUrl成功的。比对下,什么区别。这就是JS中匿名方法的this指向问题,function的声明方式,this指向的是本身,父级的变量都无法访问。

vue项目中如何在外部js文件中直接调用vue实例——比如说this

一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例

JS中this的几种情况

给元素的某个事件行为绑定方法,事件触发,方法执行,此时方法中的this一般都是当前元素本身:普通函数执行,它里边的this是谁,取决于方法执行前面是否有“.”,有的话,“.”前面是谁this就是谁,没有的话并且是在非严格模式下this就是window,严格模式下是undefined:

JavaScript中this指针指向的彻底理解

首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象

JS 中 this 在各个场景下的指向

很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解。 this 的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this 表示类方法中当前对象的实例

理解call apply bind以及其中所谓的改变this指向问题

上述代码很简单,小明有一只铅笔,有一把转笔刀,可以用来削铅笔,当我们调用;很明显会得到:小明使用了转笔刀把铅笔变成了削好的铅笔和木屑

Js中常见this指向问题

无论是工作或者面试中,this指向问题是经常遇到的。所以这篇文章把常见的指向问题列出来给大家,避免踩坑。首先我们要知道,在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了,也就是说,this的指向完全取决于函数调用的位置

JavaScript函数中this的四种绑定策略

this的四种绑定策略:默认绑定、隐式绑定、显示绑定、new绑定。首先要明确的是一般情况下,this不是函数被定义时绑定,而是函数被调用时被绑定 ,那么函数中的this有四种绑定方式:

this的指向问题

举个生活中的例子:比如说你在厨房做菜,那厨房就是你的上下文环境,你要拿一点辣椒,顺手就拿到了;比如你在试衣间,那试衣间就是你的上下文环境,你想在试衣间拿一点辣椒,但是这次拿不到了

this指向问题的经典场景

以函数形式调用,this指向window;以方法形式调用,this指向调用方法的那个对象;构造函数调用,this指向实例的对象;使用window对象的方法使,指向window;多重场景改变this指向

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!