用最简单的方法判断JavaScript中this的指向(推荐)

都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言。它把 函数式编程 和 面向对象编程 糅合一起,再加上 动态语言 特性,简直强大无比(其实是不能和C++比的,^_^ )。

JS 里的 this

  • 在 function 内部被创建
  • 指向调用时所在函数所绑定的对象(拗口)
  • this 不能被赋值,但可以被 call/apply  改变

目录

* 一个特例
* 开始判断
    * 法则一:对象方法中的this指向对象本身(箭头函数形式的除外)
    * 法则二:多层嵌套函数中的this指向等同于包含该this的最近一个function的this
    * 法则三:箭头函数以及非指向对象方法中的function的情况下this指向window
* 习题集
    * 普通函数中的this
    * 函数执行后返回另外一个函数中的this(普通函数中)
    * 多层嵌套函数中的this(定时器&箭头函数)1
    * 多层嵌套函数中的this(定时器&箭头函数)2

一个特例

在正式开始之前,我们先来说一个特例。

// 构造函数
function Student(name) {
 this.name = name
}
// 创建小明和小红两个实例
var XM = new Student('xiaoming')
var XH = new Student('xiaohong')
// 输出信息
console.log(XM) // Student {name: "xiaoming"}
console.log(XH) // Student {name: "xiaohong"}

在构造函数中,this上的值会在创建实例的时候被绑定到新创建的实例上。不适用于下面的判断方法,所以特此说明。

开始判断

下面是一个典型例子,我们的分析从这里开始。

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 },
 getName2: function() {
 setTimeout(() => {
  console.log(this)
 },0)
 },
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}
x.getName2() // {name: "bw2", getName1: ƒ}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

法则一:对象方法中的this指向对象本身(箭头函数形式的除外)

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}

法则二:多层嵌套函数中的this指向等同于包含该this的最近一个function的this

箭头函数没有独立的this作用域,所以继续往外层走,走到了getName: function(){}。那么就是他了,this指向等同于这个function内部的this指向。根据法则一,this指向对象本身。

var x = {
 name: 'bw2',
 getName2: function() {
 console.log(this) // 等同于此处的this
 setTimeout(() => {
  console.log(this) // 原始的this位置
 },0)
 }
}
x.getName2() // {name: 'bw2', getName1: ƒ}

我们可以试着在浏览器中运行,看看结果。

法则三:箭头函数以及非指向对象方法中的function的情况下this指向window

根据法则二,this是指向最近的function,因此,这里的this等同于返回的函数中的this,不是对象方法中的this,所以,指向全局。

是不是感觉有点奇怪?不过实践证明确实如此。

var x = {
 name: 'bw2',
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

习题集

欢迎大家按照法则一到三依次判断,猜测结果,并在浏览器下测试。测试结果也可以回复,大家一起讨论。

因本人能力有限,该系列法则可能在部分情况下失效。欢迎大家一起讨论。

下面是做题时间。

普通函数中的this

function x() {
 console.log(this)
}
x()

函数执行后返回另外一个函数中的this(普通函数中)

function xx(){
 return function() {
 console.log(this)
 }
}
xx()()

多层嵌套函数中的this(定时器&箭头函数)1

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(() => {
  console.log(this)
 },0)
 }
}
x.getName()

多层嵌套函数中的this(定时器&箭头函数)2

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(function() {
  console.log(this)
 },0)
 }
}
x.getName()

再次说明,该法则为实验性法则,未进行大范围的测试,不保证在所有情况下都有一致的结果。如果你发现了法则判断失败的情况,欢迎留言,一起探讨。

总结

以上所述是小编给大家介绍的Mysql 5.7.19 winx64 ZIP Archive 安装及使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • js绑定事件this指向发生改变的问题解决方法

    可对函数进行如下扩展 复制代码 代码如下: Function.prototype.bind = function(obj) { var _this = this; return function() { _this.apply(obj,arguments); } } 用法如下 复制代码 代码如下: var a = function(){ alert(this.title) }.bind(document); a(); 常用在这儿 复制代码 代码如下: function myalert() { t

  • 灵活的理解JavaScript中的this指向

    this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题.

  • JavaScript 嵌套函数指向this对象错误的解决方法

    先看一段嵌套了两层function的JavaScript代码: 复制代码 代码如下: var me = { name : 'Jimbor', blog : 'http://jmedia.cn/', sayMyName : function(){ var pre = 'My name is: '; function displayName(){ alert(pre + this.name); } displayName(); } } me.sayMyName(); 从代码上看,我们希望通过sayM

  • JS中改变this指向的方法(call和apply、bind)

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

  • 老生常谈 js中this的指向

    在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1.函数调用模式 当一个函数不是一个对象的属性时,当作函数俩调用,这时函数内的this指向全局对象(大对数情况下是window) window.value=1; function getValue(){ console.log(this.value); } getValue();//输出1,此时的thi

  • 改变javascript函数内部this指针指向的三种方法

    在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.规则0:函数本身是一个特殊类型,大多数时候,可以认为是一个变量. 复制代码 代码如下: function a() { alert(this); } 或者 var a = function() { alert(this); } 都可以认为是创建了一个变量,这个变量的值就是一个函数. 规则1:如果一个函数,是某个对象的key 值,那么,this就指向这个对象. 这个规则很好理解: 复制代码 代码如下: var

  • 用最简单的方法判断JavaScript中this的指向(推荐)

    都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言.它把 函数式编程 和 面向对象编程 糅合一起,再加上 动态语言 特性,简直强大无比(其实是不能和C++比的,^_^ ). JS 里的 this 在 function 内部被创建 指向调用时所在函数所绑定的对象(拗口) this 不能被赋值,但可以被 call/apply  改变 目录 * 一个特例 * 开始判断     * 法则一:对象方法中的this指向对象本身(箭头函数形式的除外)     * 法则二:多层嵌套

  • 判断JavaScript中的两个变量是否相等的操作符

    1.为什么要判断? 可能有些同学看到这个标题就会产生疑惑,为什么我们要判断JavaScript中的两个变量是否相等,JavaScript不是已经提供了双等号"=="以及三等号"==="给我们使用了吗? 其实,JavaScript虽然给我们提供了相等运算符,但是还是存在一些缺陷,这些缺陷不符合我们的思维习惯,有可能在使用的时候得到一些意外的结果.为了避免这种情况的出现,我们需要自己函数来实现JavaScript变量之间的对比. 2.JavaScript等号运算符存在哪

  • 我所理解的JavaScript中的this指向

    前言 JS 中的 this 指向是一个经常被问到的问题,网上也有很多文章是关于 this 的.本文整理一下我理解下的 this 以及一些我比较疑惑的关于 this 问题. this 指向 有几个 this 的指向问题是几乎每篇文章都会说的,比如作为函数直接调用,作为对象的方法调用, new 运算符执行中的 this 行为.比较通用的说法是, this 指向的是直接调用该函数的对象.其实也很好理解,就是为什么需要 this 这个关键字,就是我们有需要在函数内部对调用函数的对象进行操作的需求.但是有

  • 关于JavaScript中的this指向问题总结篇

    在javascript中this的指向一直是前端同事的心头病,也同时是各面试题的首选,现在我们就来总结一下js中this的指向.首先需要了解一下几个概念: 1:全局变量默认挂载在window对象下 2:一般情况下this指向它的调用者 3:es6的箭头函数中,this指向创建者,并非调用者 4:通过call.apply.bind可以改改变this的指向 下面我们具体分析一下 1:在函数调用时 (非严格模式) const func = function () { console.log(this)

  • 探寻JavaScript中this指针指向

    探寻JavaScript中this指针指向 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题. 为什么要学习this?如果你学过函数式编程,面向对象编程,那你肯定知

  • Javascript中this关键字指向问题的测试与详解

    前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其中this "指针"就是实现面向对象的一个很重要的特性.本文将给大家详细介绍关于Javascript中this关键字指向的相关内容,让我们先做一个小测试,如果全部答对了,恭喜你不用往下看了. 测试题目 第一题 <script> var str = 'zhangsan'; function

  • 详解JavaScript中关于this指向的4种情况

    对很多前端开发者来说,JavaScript语言的this指向是一个令人头疼的问题.先看下面这道测试题,如果你能实现并解释原因,那本文对你来说价值不大,可以直接略过. **开篇测试题:**尝试实现注释部分的Javascript代码,可在其他任何地方添加更多代码(如不能实现,说明一下不能实现的原因): let Obj = function (msg) { this.msg = msg this.shout = function () { alert(this.msg) } this.waitAndS

  • 浅谈JavaScript中this的指向问题

    JavaScript中this指向问题 记得初学 JavaScript 时,其中 this 的指向问题曾让我头疼不已,我还曾私自将其与闭包.原型(原型链)并称 JS 武林中的三大魔头.如果你要想在 JS 武林中称霸一方,必须将这三大魔头击倒.个人认为在这三大魔头中,this 指向问题的武功最菜(难度最低).俗话说柿子捡软的捏,那我们就先从 this 指向问题下手. 先记住攻克 this 指向问题的口诀(前辈们的总结):哪个对象调用函数,函数里的 this 就默认指向哪个对象(注意 this 只能

  • 浅谈JavaScript中this的指向更改

    JS中this指向的更改 JavaScript 中 this 的指向问题前面已经总结过,但在实际开中, 很多场景都需要改变 this 的指向. 现在我们讨论更改 this 指向的问题. call更改this指向 call 的使用语法:func.call(thisArg, arg1, arg2, ...) call 方法需要一个指定的 this 值( this要指向的对象 )和一个或者多个参数.提供的 this 值会更改调用函数内部的 this 指向. // 使用 call 方法改变调用函数执行上

随机推荐