zoukankan      html  css  js  c++  java
  • js 中this指向问题总结

    1、this默认绑定
    this默认绑定即函数调用时,无论函数声明在哪,在哪调用,由于函数调用时无任何调用前缀的情景,默认绑定时this指向全局对象(非严格模式):
    function fn1() {
    let fn2 = function () {
    console.log(this); //window
    fn3();
    };
    console.log(this); //window
    fn2();
    };

    function fn3() {
    console.log(this); //window
    "use strict";
    console.log(this); //undefined 严格模式,默认指向undefined
    };

    fn1();
    2、this隐式绑定,如果函数调用时,前面存在调用它的对象,那么this就会隐式绑定到这个对象上
    function fn() {
    console.log(this.name);
    };
    let obj = {
    name: '听风是风',
    func: fn
    };
    obj.func() //听风是风
    如果函数调用前存在多个对象,this指向距离调用自己最近的对象
    function fn() {
    console.log(this.name);
    };
    let obj = {
    name: '行星飞行',
    func: fn,
    };
    let obj1 = {
    name: '听风是风',
    o: obj
    };
    obj1.o.func() //行星飞行
    作用域链与原型链的区别:
    当访问一个变量时,解释器会先在当前作用域查找标识符,如果没有找到就去父作用域找,作用域链顶端是全局对象window,如果window都没有这个变量则报错。

    当在对象上访问某属性时,首选i会查找当前对象,如果没有就顺着原型链往上找,原型链顶端是null,如果全程都没找到则返一个undefined,而不是报错。

    2.1在特定情况下会存在隐式绑定丢失的问题,最常见的就是作为参数传递以及变量赋值
    var name = '行星飞行';
    let obj = {
    name: '听风是风',
    fn: function () {
    console.log(this.name);
    }
    };

    function fn1(param) { //参数传递
    param();
    };
    fn1(obj.fn);//行星飞行,this丢失这里指向了window。
    3、this显式绑定,是指我们通过call、apply以及bind方法改变this的行为
    let obj1 = {
    name: '听风是风'
    };
    let obj2 = {
    name: '时间跳跃'
    };
    let obj3 = {
    name: 'echo'
    }
    var name = '行星飞行';

    function fn() {
    console.log(this.name);
    };
    fn(); //行星飞行
    fn.call(obj1); //听风是风
    fn.call(undefined); //行星飞行
    注意:指向参数提供的是null或者undefined,那么 this 将指向全局对象
    4、new绑定
    new一个函数究竟发生了什么呢,大致分为三步:
    1.以构造器的prototype属性为原型,创建新对象;
    2.将this(可以理解为上句创建的新对象)和调用参数传给构造器,执行;
    3.如果构造器没有手动返回对象,则返回第一步创建的对象
    5、箭头函数的this,箭头函数的this指向取决于外层作用域中的this,一旦箭头函数的this绑定成功,也无法被再次修改,
    function fn() {
    return () => {
    console.log(this.name);
    };
    }
    let obj1 = {
    name: '听风是风'
    };
    let obj2 = {
    name: '时间跳跃'
    };
    let bar = fn.call(obj1); // fn this指向obj1 ,
    bar.call(obj2); //听风是风
    5.1箭头函数的this也不是真的无法修改,箭头函数的this就像作用域继承一样从上层作用域找,因此可以修改外层函数this指向达到间接修改箭头函数this的目的。
    function fn() {
    return () => {
    console.log(this.name);
    };
    };
    let obj1 = {
    name: '听风是风'
    };
    let obj2 = {
    name: '时间跳跃'
    };
    fn.call(obj1)(); // fn this指向obj1,箭头函数this也指向obj1
    fn.call(obj2)(); //fn this 指向obj2,箭头函数this也指向obj2
    6、this绑定优先级,如果一个函数调用存在多种绑定方法,this最终指向谁呢?
    显式绑定 > 隐式绑定 > 默认绑定
    new绑定 > 隐式绑定 > 默认绑定

  • 相关阅读:
    [编程题-网易]小易的升级之路
    [腾讯编程题]微信红包
    [编程题]生成格雷码
    [编程题]二叉树-网易
    安装wepack
    css选择器
    宽和高
    配置环境变量
    offsetLeft在各浏览器的值
    容易忘记的css属性和动画属性
  • 原文地址:https://www.cnblogs.com/yiran2020/p/14349112.html
Copyright © 2011-2022 走看看