JS this 分析

warnerwu 发布于2019-08-23 14:12 / 2702人阅读

摘要：指向分细我们在中研究的都是函数中的中的代表的是当前行为执行的主体中的代表的是当前行为执行的环境区域例如在饭店吃饺子执行主体就是上下文就是饭店吃饺子就是行为吃饺子吃饺子输出指吃饺子输出指的还是是谁和函数在哪定义的和在哪执行的没有任

1. this指向分细 1.1 this

this(我们在js中研究的都是函数中的this)

JS中的this代表的是当前行为执行的主体

JS中的context代表的是当前行为执行的环境(区域)

//例如:A 在 饭店 吃 饺子
//执行主体就是A 上下文就是饭店 吃饺子就是行为
function 吃饺子() {
    console.log(this);
}
A.吃饺子()//输出this ---> 指A
(function() {
    A.吃饺子()//输出this --->指的还是A
})
//this是谁 和函数在哪定义的和在哪执行的没有任何关系,就是指执行主体

1.2 如何区分this(目前只分析三种后续会更新)

1、函数执行,首先看函数前面是否有".",有的话前面是谁,this就是谁,没有的话this指window

function fn() { console.log(this) };
var obj = { fn: fn };
fn()//this--->指window
var obj = { fn: fn };
obj.fn()//this指obj
function sum() {
    fn()//this---->指window
}
sum();
var oo = {
    sum: function() {
        fn()//this --->指window
    }
}
oo.sum();

2、自执行函数中的this永远是指window

3、给元素的的某一个事件绑定方法,当事件触发的时候,执行对应的方法,this是指当前的元素

function fn() {
    console.log(this);
}
document.getElementById("#div1").onclick = fn;
//fn中的this --->指 "#div1"
document.getElementById("#div1").onclick = function() {
    //this --->指 "#div1";
    fn()//this --->指window
}

1.3 经典面试题分析

var num = 20;
var obj = { //对象只是堆内存,不是作用域,想访问变量num,必须是obj.num的形式
    num: 30,
    fn: (function(num) {
        this.num *= 3;
        num += 15;
        var num = 45;
        return function() {
            this.num *=4;
            num +=20;
            console.log(num)
        }
    })(num)
    //此处传参 是全局变量的num的值20 赋值给了自执行函数的形参 而不是obj的30 如果传入obj下的30 需要写成obj.num
}
var fn = obj.fn;
fn();//输出65
obj.fn();//85
console.log(window.num);//240
console.log(obj.num);//120

此题涉及主要知识点如下

a、函数内部返回的引用类型的值(函数/对象)被外部变量占用,此函数执行形成的作用域不销毁
b、给obj对象赋值的过程中自执行函数执行并return 一个函数
c、自执行函数的this指向window
d、obj.fn fn中的this 指向obj
e、自执行函数在全局作用下并不进行预解释,但是函数内部执行会形成私有作用域,函数内部会进行预解释
f、如果要分析此题,画图是最容易的且最直观的
g、在函数执行的过程中一定要区分this.num 和私有变量num 这个是解答此题的关键
h、当前作用域中没有num变量也没有参数传入要往上级作用域查找num(如何找也是一个知识点)

附示意图

动力: 这是我的学习笔记,您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐

期望: 不喜勿喷,谢谢合作！如果涉及版权请及时联系我,马上删除!

GPU云服务器云服务器 js中的this js里面的this js中的this机制 js中的this与html

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

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

谈谈对模块化的理解

摘要：重要的模块化规范有几个，模块机制，，。模块化的目的在于营造安全封闭的作用域且具有易于引用接口，按我的理解可分为模块定义模块引入两部分。它的定义如下模块标识符模块对外输出的值调用该模块的模块。在中，有一部分模块由提供，称之为核心模块。重要的模块化规范有几个：commonjs，ES6模块机制，AMD，CMD。由于业务中一直接触的都是Vue+webpack+babel架构的项目，在封装代码...

silvertheo 2019-08-22 11:11 评论0 收藏0
React.js 小书 Lesson26 - 实战分析：评论功能（五）

摘要：修改请输入用户名请输入评论内容我们增加了和分别用于加载和保存评论列表数据。现在发布评论，然后刷新可以看到我们的评论并不会像以前一样消失。非常的不错，持久化评论的功能也完成了。下一节中我们将介绍小书实战分析评论功能六。 React.js 小书 Lesson26 - 实战分析：评论功能（五）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/...

Nekron 2019-08-21 17:33 评论0 收藏0
一步一步搭建前端监控系统：JS错误监控篇

摘要：摘要徒手写错误监控。为什么用定时器呢，因为在单页应用中，路由的切换和地址栏的变化是无法被监控的，我确实没有想到特别好的办法来监控，所以用了这种方式，如果有人有更好的办法，请给我留言，谢谢。摘要：徒手写JS错误监控。作者：一步一个脚印一个坑原文：搭建前端监控系统（二）JS错误监控篇 Fundebug经授权转载，版权归原作者所有。背景：市面上的监控系统有很多，大多收费，对于...

EdwardUp 2019-08-23 18:30 评论0 收藏0
should.js源码分析与学习

摘要：结构其中为整个项目入口，为中的类，负责对测试信息进行记录。通过抛出错误而不是返回布尔值的方式来通知用户，能够更加明显的通知用户，也方便向上抛出异常进行传递。背景为了研究与学习某些测试框架的工作原理，同时也为了完成培训中实现一个简单的测试框架的原因，我对should.js的代码进行了学习与分析，现在与大家来进行交流下。目录 ext assertion.js assertion-e...

Turbo 2019-08-21 13:33 评论0 收藏0
javascript引擎执行的过程的理解--语法分析和预编译阶段

摘要：所以觉得把这个执行的详细过程整理一下，帮助更好的理解。类似的语法报错的如下图所示三预编译阶段代码块通过语法分析阶段之后，语法都正确的下回进入预编译阶段。另开出新文章详细分析，主要介绍执行阶段中的同步任务执行和异步任务执行机制事件循环。一、概述 js是一种非常灵活的语言，理解js引擎的执行过程对于我们学习js是非常有必要的。看了很多这方便文章，大多数是讲的是事件循环（event loo...

molyzzx 2019-08-23 14:35 评论0 收藏0