欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端js中this指向及改变this指向的方法

程序员文章站 2022-08-10 10:02:01
js中this指向是一个难点,花了很长时间来整理和学习相关的知识点。 一、 this this是JS中的关键字, 它始终指向了一个对象, this是一个指针; 参考博文: 1. "JavaScript函数中的this四种绑定形式" 2. "this指向及改变this指向的方法" 二、 this显示绑 ......

js中this指向是一个难点,花了很长时间来整理和学习相关的知识点。

一、 this

this是js中的关键字, 它始终指向了一个对象, this是一个指针;

参考博文:

  1. javascript函数中的this四种绑定形式

二、 this显示绑定和隐式绑定

1. this显示绑定

 含义: 当一个函数没有明确的调用对象的时候, 也就是单纯作为独立函数调用的时候, 将对函数的this使用默认绑定: 绑定到全局的window对象

 在显式绑定下: 函数将取得在“ 包含对象“ 里的永久居住权, 一直都会” 住在这里“
前端js中this指向及改变this指向的方法

1.1 全局函数

function fire() {
    console.log(this === window); //fire此时是全局的方法,this指向window
}
fire(); // 输出true

1.2 函数内嵌套函数

function fire() {
    // 我是被定义在函数内部的函数哦!
    function innerfire() {
        console.log(this === window); //未明确调用对象,this指向window
    }
    innerfire(); // 独立函数调用
}
fire(); // 输出true
innerfire();

示例:

var a = 1;
console.log(this.a); //1 因为此时this指向了window,因而调用1
function fire() {
    var a = 2;
    console.log(this.a); //1 因为此时this指向了window,因而调用1

    function innerfire() {
        var a = 3;
        console.log(this.a); //1 因为此时this指向了window,因而调用1
    }
    innerfire();
}
fire(); //输出1

 与作用域的区别: 全局作用域和局部作用域, 去掉this可发现区别

var a = 1;
console.log(a); //1 a在全局作用域
function fire() {
    var a = 2;
    console.log(a); // 2 fire函数作用域
    function innerfire() {
        var a = 3;
        console.log(a); //3 此时打印输出a,a在innerfire作用域。从自身作用域查找变量,未找到才网上查找
    }
    innerfire();
}
fire();

1.3 对象内层函数内部函数

var obj = {
    fire: function () { //此时的fire函数其实用到了隐式绑定
        function innerfire() {
            console.log(this === window); //未明确调用对象,this指向window
        }
        innerfire();
    }
}
obj.fire(); //输出 true

示例:

var a = 1;
console.log(this.a); //1 this指向全局变量window
var obj = {
    a: 2,
    fire: function () {
        var a = 3;
        console.log(this.a); //2 因为是obj.fire(),调用了fire函数,因为this指向了obj,输出了obj下的a=2
        function innerfire() {
            var a = 4;
            console.log(this.a); //1 未明确调用对象,this指向window
        }
        innerfire(); //没有明确调用的对象
        console.log(this.a); //2 this指向obj
    }
}
obj.fire();

2、 this隐式绑定

a.隐式绑定

 当函数被一个对象“ 包含” 的时候, 我们称函数的this被隐式绑定到这个对象里面, 这时候, 通过this可以直接访问所绑定的对象里面的其他属性, 比如下面的a属性

 在隐式绑定下: 函数和只是暂时住在“ 包含对象“ 的旅馆里面, 可能过几天就又到另一家旅馆住了
前端js中this指向及改变this指向的方法

var obj = {
    a: 1,
    fire: function () { //此时函数的this被隐式绑定到了对象obj
        console.log(this == obj); // obj中有fire函数,因而默认this指向obj
        console.log(this.a); // 1 this.a 相当于obj.a =1
    }
}
obj.fire(); // 输出1 

 相同的方法:
 fire函数并不会因为它被定义在obj对象的内部和外部而有任何区别,

function fire() {
    console.log(this.a)
}

var obj = {
    a: 1,
    fire: fire
}
obj.fire(); // 输出1

b.动态绑定:
 this实在代码运行期绑定而不是在书写期

var obj = {
    a: 1, // a是定义在对象obj中的属性 1
    fire: function () {
        console.log(this.a)
    }
}
var a = 2; // a是定义在全局环境中的变量 2
obj.fire(); //1  此时fire的指向时obj
var fireingrobal = obj.fire; //因为fireingrobal是全局变量,this对于obj的绑定丢失,绑定到了全局window
fireingrobal(); // 输出 2 输出全局变量啊
var a = 2;
var obj = {
    a: 1, // a是定义在对象obj中的属性
    fire: function () {
        console.log(this.a)
    }
}

function otherfire(fn) { //全局函数,this绑定window
    fn();
}
otherfire(obj.fire); // 输出2   this对于obj的绑定丢失,绑定到了全局this上面
var obj = {
    a: 1,
    obj2: {
        a: 2,
        obj3: {
            a: 3,
            geta: function () { //obj3.geta()   this绑定到了obj3当中
                console.log(this.a)
            }
        }
    }
}
obj.obj2.obj3.geta(); // 输出3

三、 this指向

 this的指向不是由定义this决定的, 而是随脚本解析自动赋值的。

1. 全局环境作用域: this在全局环境始终指向window


 变量形式

console.log(this === window) // true
console.log(window.alert === this.alert) // true
console.log(this.parseint("021", 10)) // 21
var fruit = "banana"; // 定义一个全局变量,等同于window.fruit = "banana"

2. 函数环境 作用域: 函数由谁调用, this就指向谁

2.1 非严格模式

function fn() {
    console.log(this); //window
}
fn() === window; // true;window.fn(),此处默认省略window

2.2 严格模式

  a 全局环境下, this指向window

"use strict";
this.b = "mdn";
console.log(this == window) // "mdn"
console.log(b) // "mdn"

  b 函数环境下, this为undefined

function fn() {
    "use strict"; // 这里是严格模式
    console.log(this); //window
}
fn() === undefined //true

3 对象中的方法函数调用: 指向 该方法所属的对象
 隐式调用

var obj = {
    a: 1,
    fn: function () {
        return this;
    }
}
console.log(obj.fn() == obj); //true  函数被obj调用,指向obj

 this动态绑定

var obj = {
    a: 1,
    fn: function () {
        return this;
    }
}
console.log(obj.fn()); //1  函数被obj调用,指向obj,输出obj的a=1
var a = 2;
var newfun = obj.fn; //此时更改this指向为全局变量newfun
newfun(); //2 ,this访问全局变量a=2

4 在构造函数中: this始终指向新对象
前端js中this指向及改变this指向的方法

function person(age, name) {
    this.age = age;
    this.name = name
    console.log(this) // 此处 this 分别指向 person 的实例对象 p1 p2
}
var p1 = new person(18, 'zs')
var p2 = new person(18, 'ww')

前端js中this指向及改变this指向的方法
5 通过事件绑定的方法: this 指向 绑定事件的对象

obtn.onclick = function () {
        console.log(this); // btn
    }

    <
    button id = "btn" > hh < /button>

6 定时器函数: 因为是异步操作, this 指向 window

 延时函数内部的回调函数的this指向全局对象window( 当然我们可以通过bind方法改变其内部函数的this指向)

 我们常见的window属性和方法有alter, document, parseint, settimeout, setinterval, location等等, 这些在默认的情况下是省略了window前缀的。( window.alter = alter)。

6.1 普通定时器

setinterval(function () {
    console.log(this); // window
}, 1000);

前端js中this指向及改变this指向的方法
6.2 定时器嵌套

function person() {
    this.age = 0;
    settimeout(function () {
        console.log(this);
    }, 3000);
}

var p = new person(); //3秒后返回 window 对象

6.3 可以改变this指向 - 想见三方法

function person() {
    this.age = 0;
    settimeout((function () {
        console.log(this);
    }).bind(this), 3000);
}
var p = new person(); //3秒后返回构造函数新生成的对象 person{...}

7 自执行函数(匿名函数): 指向全局变量window

(function inner() {
    console.log(this); //this ==> window
})();

8 箭头函数

要点:

a. 箭头函数的this是在定义函数时绑定的, 不是在执行过程中绑定的
b. 箭头函数中的this始终指向父级对象
c. 所有 call() / apply() / bind() 方法对于箭头函数来说只是传入参数, 对它的 this 毫无影响。
var obj = {
    a: 1,
    fn: () => {
        //箭头函数中的this始终指向定义时的环境
        //箭头函数中的this始终指向父级对象
        console.log(this); //对象内的this调用时一般指向obj,而箭头函数在创建时就指向了obj的父级对象window
    }
}
obj.fn(); //window

四、 更改this指向

 每个function构造函数的原型prototype, 都有方法
call(), apply(), bind()

总结:
a call(), apply()
在特定作用域调用函数
b bind()
会创建一个函数的实例, this会被绑定到bind() 函数
bing() 绑定this, bind()() 调用函数

1. call() 方法

var person = {
    name: "zhangsan",
    age: 19
}

function aa(x, y) {
    console.log(x + "," + y);
    console.log(this);
    console.log(this.name);

}

aa(4, 5); //this指向window--4,5  window  空

aa.call(person, 4, 5); //this指向person--4,5  person{}对象  zhangsan

前端js中this指向及改变this指向的方法
2. apply() 方法

 apply() 与call() 非常相似, 不同之处在于提供参数的方式, apply() 使用参数数组, 而不是参数列表

var person = {
    name: "zhangsan",
    age: 19
}

function aa(x, y) {
    console.log(x + "," + y);
    console.log(this);
    console.log(this.name);

}

aa.apply(person, [4, 5]); //this指向person--4,5  person{}对象  zhangsan

前端js中this指向及改变this指向的方法

3. bind() 方法
 bind() 创建的是一个新的函数( 称为绑定函数), 与被调用函数有相同的函数体, 当目标函数被调用时this的值绑定到 bind() 的第一个参数上
前端js中this指向及改变this指向的方法

var person = {
    name: "zhangsan",
    age: 19
}

function aa(x, y) {
    console.log(x + "," + y);
    console.log(this);
    console.log(this.name);

}

aa.bind(person, 4, 5); //只是更改了this指向,没有输出
aa.bind(person, 4, 5)(); //this指向person--4,5  person{}对象  zhangsan

前端js中this指向及改变this指向的方法
4. 存储this指向到变量中

var odiv1 = document.getelementbyid("div1");
odiv1.onclick = function () {
    var _this = this; //将this储存在变量中,而且不改变定时器的指向
    settimeout(function () {
        console.log(_this); //注意这里是_this,而不是this-- <div id="div1">点击</div>
        console.log(this); //定时器的指向没有被改变--仍然是window
    }, 1000)
}

前端js中this指向及改变this指向的方法

前端js中this指向及改变this指向的方法

五、 改变this指向综合案例**

1、 为更改this指向

var odiv1 = document.getelementbyid("div1");
odiv1.onclick = function () {
        settimeout(function () {
            console.log(this); //点击时输出 window对象
        }, 1000)
    }

    <
    div id = "div1" > 点击 < /div>

前端js中this指向及改变this指向的方法
2、 更改this指向 - bing, call, apply
 在定时器外, 在绑定事件中的this肯定指向绑定事件的对象div啊, 用call和apply都行

var odiv1 = document.getelementbyid("div1");
odiv1.onclick = function () {
    settimeout(function () {
        console.log(this); // 更改this指向为 <div id="div1">点击</div>
    }.bind(this), 1000)
}

前端js中this指向及改变this指向的方法
3、 存储this指向到变量中

var odiv1 = document.getelementbyid("div1");
odiv1.onclick = function () {
    var _this = this; //将this储存在变量中,而且不改变定时器的指向
    settimeout(function () {
        console.log(_this); //注意这里是_this,而不是this-- <div id="div1">点击</div>
        console.log(this); //定时器的指向没有被改变--仍然是window
    }, 1000)
}

前端js中this指向及改变this指向的方法
前端js中this指向及改变this指向的方法