javscript中this初探

Xufc 发布于2019-08-26 11:42 / 2726人阅读

摘要：是什么是一个特别的关键字，是自动定义在所有函数和全局的作用域中。是在运行时绑定的，而不是声明时绑定的。小结的指向取决于函数执行时的块级上下文

This

This是什么：
this是一个特别的关键字，是自动定义在所有函数和全局的作用域中。this是在运行时绑定的，而不是声明时绑定的。

为什么要有this
假设不存在this关键字，那么对于一个函数根据不同上下文背景下的复用就用传入参数

        var obj = Object.create(null);

        obj.name = "Nico";

        function speak(context) {
            console.log(context.name + " speaks a word");
        }

        speak(obj);

this指向的几种情况：
1、一般情况下，this是指向当前执行时的对象

var person = {
    name: "nico",
    getName: function() {
        console.log(this.name)
    }
}

var name = "siip";

person.getName(); //nico

person对象调用getName方法，所以当前this指向的是person对象

2、如果没有明确对象时，this指向全局对象(在非严格模式下，在严格模式下，函数绑定undefined，也就是this指向undefined)

var name = "siip";

function className() {
    console.log(this.name);
}

className();//siip

其实这里的className可相似于window.className,所以当前this指向window
3、setTimeout、setInterval、匿名函数this指向全局对象

var person = {
    name: "nico",
    fns: function() {
        setTimeout(function() {
            console.log(this.name)
        }, 100);//siip

        setInterval(function() {
            console.log(this.name)
        }, 100);//siip

        (function() {
            console.log(this.name)
        })()//siip
    }
}
var name = "siip";
person.fns();

这些方法都比较容易理解this的指向，因为匿名函数或者定时器函数都是挂载window上的函数，调用者是window对象，这些函数里声明的函数，也指向调用者，类似于：

        function foo() {
            function bar() {
                console.log(this)
            }
            bar();
        }

        foo();

4、apply、call能够改变this指向（无参数时或者传入null、undefined，指向window）

    var person = {
        name: "nico",
        applyFns: function() {
            console.log(this.name)
        }
    }
    var name = "siip";
    person.applyFns();//nico
    person.applyFns.apply();//siip

有时候，

5、new Function 构造函数中的this指向该构造函数new出来的对象。

因为new Function的过程大概：

创建一个新的空对象

空对象_proto_指向Function.prototype

空对象与当前函数调用的this绑定

返回新创建对象

所以new Function中的this指向return的对象。

小结

this的指向取决于函数执行时的块级上下文

GPU云服务器云服务器 java中this javascript中this详解 javscript 初探webrtc

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

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

javscript学习笔记

摘要：一直对抱有敬畏的态度，也没有一直深入学习。当学到各种框架的时候才发现力不从心，感觉到了基础的重要性，重新认真的系统的学习一下。一直对javscript抱有敬畏的态度，也没有一直深入学习。当学到各种js框架的时候才发现力不从心，感觉到了javascript基础的重要性，重新认真的系统的学习一下。showImg(http://static.xiaomo.info/images/javas...

hedge_hog 2019-08-19 18:33 评论0 收藏0
javscript插件汇总

摘要：更新单元测试，已使用，，，使用测试覆盖率，并集成配合来做持续化构建，可以参考本项目的配置文件和的配置文件。判断是否然后记得在文件中暴露函数单元测试在文件新建测试用例然后记得在中引入之前创建的测试用例脚本。前言作为战斗在业务一线的前端，要想少加班，就要想办法提高工作效率。这里提一个小点，我们在业务开发过程中，经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数...

K_B_Z 2019-08-22 13:53 评论0 收藏0
Promise初探

摘要：可以根据省份城市和区对组件设置默认值。获取省份获取城市获取区出现层嵌套的回调，这就是传说中的恶魔金字塔。相比回调嵌套，层次更分明，可读性强。基本原理学习无论是在异步操作的执行之前或执行之后，用对象的方法注册回调，回调都能一致执行。遭遇恶魔金字塔项目需要，封装了一个省市区的地址选择器组件。可以根据省份id、城市id和区id对组件设置默认值。逻辑是这样的：获取省份列表，选中默认省...

mj 2019-08-22 11:08 评论0 收藏0
Vue初探-日期选择器

摘要：之前用用面向对象的方法实现过日期选择器，最近在练习，现在用实现一遍。需求设定实现一个日期选择器，默认显示，高亮显示。能够点击上一月下一月进行日期跳转。实现日期选择有两个比较关键的方法获取当月天数，以便循环遍历多少天。之前用jquery用面向对象的方法实现过日期选择器，最近在练习vue，现在用vue实现一遍。发现vue用数据驱动的方式来实现，感觉还不错。需求设定 1.实现一个日期选择...

MAX_zuo 2019-08-22 10:47 评论0 收藏0