this 改变this的指向

walterrwu 发布于2019-08-23 15:33 / 1562人阅读

摘要：两个参数在中新增了该方法也是强制更改指向而改变的指向，返回的是函数但是和的区别是更改后不会立即执行，它会返回一个新函数。

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，这个指向在定义时就已经确定而不会在调用时指向其执行环境的（变量）对象。

云服务器 GPU服务器改变this指向 this的指向 this的用法 php 的$this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102217.html

轻松搞定javascript中this的指向

摘要：调用在中，通过的形式调用一个构造函数，会创建这个构造函数实例，而这个实例的指向创建的这个实例。如下例所示，在构造函数内部使用并没有改变全局变量的值。显然，箭头函数是不能用来做构造函数。　　关于javascript中this指向的问题，现总结如下，如有不正确，欢迎指正。　　javascript中，this的指向并不是在函数定义的时候确定的，而是在其被调用的时候确定的。也就是说，函数的...

shinezejian 2019-08-23 12:14 评论0 收藏0
JavaScript中的this指向总结

摘要：其中和在传入要绑定的指向时，立即执行。需要注意的是，当使用改变函数内部的指向时如果传入的不是一个对象，会调用相对的构造函数，进行隐式类型装换。关于javascript中this指向的总结浏览器环境在全局作用域中，this的指向是window对象 console.log(this); //Window对象 console.log(this === window); //true E...

lavnFan 2019-08-26 13:39 评论0 收藏0
bind函数作用、应用场景以及模拟实现

摘要：返回的新函数调用时也可以向原函数传递实参，这里就涉及顺序问题。返回的新函数被当成构造函数调用函数后返回的新函数，也可以被当做构造函数。使用，以原函数作为新对象的原型创建对象测试打印打印函数源码已实现完成，希望对你有帮助。 bind函数 bind 函数挂在 Function 的原型上 Function.prototype.bind 创建的函数都可以直接调用 bind,使用： fu...

Eminjannn 2019-08-23 14:21 评论0 收藏0
JS中this关键字改变指向的三种方法（apply、call、bind）

摘要：函数的几种调用方式普通函数调用作为方法来调用作为构造函数来调用使用方法来调用方法箭头函数但是不管函数是按哪种方法来调用的，都需要记住一点谁调用这个函数或方法关键字就指向谁。作为构造函数来调用构造函数出来的实例，指向这个实例对象。首先，了解一下this关键字。this关键字就涉及到函数调用的内容。函数的几种调用方式: 1 普通函数调用2 作为方法来调用3 作为构造函数来调用4 使用ap...

shiina 2019-08-26 13:51 评论0 收藏0