JavaScript this在函数中的指向及实例详解

一、this，其实可以类比成人

说到this的话，我们在js中主要研究的都是函数中的this，在javascript中，this代表当前行为的执行主体，而context代表的是当前行为执行的的环境（区域）。

例如男神在北理珠吃饭，这句话分别代表的含义如下

男神 -->> 主体（this）

吃饭 -->> 函数（function）

北理珠 -->> 环境（context）

-->>说明：吃饭是函数，男神是函数的主体，北理珠就是当前行为的执行环境（context），主体跟上下文没有必然的联系，主体只与函数有关系；就好像男神吃饭，其实哪里都可以吃饭，吃饭这个动作的主体永远都是男神，环境是可以变化的。

-->>结论：上面，其实也可以说明，this指的是谁，和函数在哪里定义和执行是没有任何关系的。

二、在函数中，如何区分this

1、函数执行，首先看函数名前面是否有“.” ，有的话， “.”前面是谁，this就是谁；没有的话this就是window

//例子一
console.log(this);
function eat() {
  console.log(this); //this->window
}
~function() {
  eat(); //this->window
}();

//例子二
function fn() {
  console.log(this);
}
var obj = {fn: fn};
fn(); //this->window
obj.fn() //this->obj

//例子三
function sum() {
  fn();
}
sum(); //this->window

//例子四
var oo = {
  sum: function() {
    console.log(this);
    fn();
  }
}
oo.sum(); //首先sum函数里面，第一个输出this为oo；之后执行fn()，this为window

2、立即执行函数中的this永远都是window

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

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

function fn() {
  console.log(this);
}
//例子一
document.getElementById("div1").onclick = fn; //this -> dom元素
//例子二
document.getElementById("div1").onclick = function() {
  console.log(this); // this->#div
  fn(); // this->window
}

结论： 找到函数在哪里执行的，有点，this就是点前面东西；没点，this就是window

三、使用this分析一道面试题

var num = 20;
var obj = {
  num: 30,
  fn: (function(num) {
    this.num *= 3;
    num += 15;
    var num = 45;
    return function() {
      this.num *= 4;
      num + =20;
      console.log(num);
    }
  })(num)
};
var fn = obj.fn;
fn(); // ->65
obj.fn(); // ->85
console.log(window.num, obj.num) // ->240, 120

上面代码使用堆栈图来描述，如下，首先正方形代表栈内存（函数执行环境，context），圆边方形代表堆内存（用来存放字符串）。

第一步，形成一个js执行环境，window作用域，首先预解释（声明var，声明+定义function）；

第二步，代码由上往下执行，num = 20, obj = 引用数据类型（数据存在堆内存里面）

第三步，因为obj.fn是立即执行函数，所以形成一个私有作用域A，执行fn里面的函数，因为fn里面的函数返回值为function，return值被外面的obj.fn引用了，这个立即执行函数A作用域不销毁。

第四步，window作用域下面的代码继续往下执行。

四、this实践运用

现在有这样一个需求，要求做一个累加器，每点击一次，就累加1。

var oBtn = document.getElementById("btn");
var spanNum = document.getElementById("spanNum");
// 方法一
// 利用全局作用域不销毁的原理，把需要累加的数字定义为全局变量
var count = 0;
oBtn.onclikc = function() {
  count++;
  spanNuM.innerText = count;
}
// 弊端：在项目中为了防止全局变量之间的冲突，我们一般是禁止或者减少使用全局变量的

// 方法二
// 形成一个不销毁的私有作用域保存我们需要累积的数据
// 1）
(function() {
  var count = 0;
  oBtn.onclick = function() {
    ++count;
    spanNum.innerText = count;
  }
})
// 2）
oBtn.onclick = (function() {
  var count = 0;
  return function() {
    ++count;
    spanNum.innerText = count;
  }
})
// 上面的两种写法都是表达同一个意思
// 弊端：有一个不销毁的私有作用域，占那么一点点内存

// 方法三
// 利用innerHTML的方式处理，每点击一次都需要到页面获取最新的值，然后累加，最后把结果放进去
oBtn.onclick = function() {
  ++spanNum.innerHTML;
}
// 弊端：innerHTML获取的时候本来就需要浏览器去处理，每一次都需要把页面的内存先转化为字符串，然后累加，累加完重新添加回去，当重新添加的时候浏览器需要重现渲染一遍页面。

// 方法四
// 利用自定义属性存储（推荐！）
oBtn.count = 0;
oBtn.onclick = function() {
  spanNum.innerTxt = ++this.count;
}
//注意，这里的count只是对象的一个属性，它既不是全局变量，也不是局部变量哦。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js原生态函数中使用jQuery中的 $(this)无效的解决方法

    我今天的例子是这样的, 复制代码 代码如下: $("ul li").hover(function(){ setTimeout(function(){ $(this).addClass("test"); alert("延迟了0.3s 我出现了!") //测试 },300) }) 在运行时,这个黄色部分是不执行的 ,然后我弹出了一下$(this)原来是undefined (其实已经猜到了): 然后我就没想(习惯),直接到百度找了,然后没找到答案,然后

  • JavaScript箭头函数中的this详解

    前言 箭头函数极大地简化了this的取值规则. 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () { console.log("Hello, Fundebug!"); } 箭头函数指的是用=>定义的函数: var hello = () => { console.log("Hello, Fundebug!"); } JavaScript箭头函数与普通函数不只是写法上的区别,它们还有一些微妙的不

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

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

  • js this函数调用无需再次抓获id，name或标签名

    this就是你当前要执行的js所抓获的节点,这样在js里就可以不用document.getElement之类的写法来抓获id,name或标签名,省去一些麻烦.一般用obj来代替. 复制代码 代码如下: <input type="button" id="tianjia" value="保 存" class="btn1" onClick="nullCheck(this)"/> <script&

  • 深入理解Javascript箭头函数中的this

    首先我们先看一段代码,这是一个实现倒数功能的类「Countdown」及其实例化的过程: function Countdown(seconds) { this._seconds = seconds; } Countdown.prototype._step = function() { console.log(this._seconds); if (this._seconds > 0) { this._seconds -= 1; } else { clearInterval(this._timer)

  • JavaScript函数中的this四种绑定形式

    JavaScript函数中的this四种绑定形式

    正文 javascript中的this和函数息息相关,所以今天,我就给大家详细地讲述一番:javascript函数中的this 一谈到this,很多让人晕晕乎乎的抽象概念就跑出来了,这里我就只说最核心的一点--函数中的this总指向调用它的对象,接下来的故事都将围绕这一点展开 (提醒前排的筒子们准备好茶水和西瓜,我要开始讲故事啦!!) [故事]有一个年轻人叫"迪斯"(this),有一天,迪斯不小心穿越到一个叫 "伽瓦斯克利"(javascript)的 异世界,此时此

  • JS函数this的用法实例分析

    本文实例讲述了JS函数this的用法.分享给大家供大家参考.具体如下: 在js中写函数时,很多用到this. this究竟是什么,this是个关键字,是个指针,指向执行环境作用域,也称之为上下文. 先说下函数吧,个人理解是函数是在语言中重复调用的代码块. 在JS里,把函数赋值给对象的属性时,称之为方法 如: var m={}; m.title='title'; m.show=function(){ alert(this.title) } m.show() 就是把函数作为对象m的方法来调用 这样的

  • JS匿名函数内部this指向问题详析

    前言 网上看到一句话,匿名函数的执行是具有全局性的,那怎么具有的全局性呢? this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 1.案例中,第一个say打出来的是Alan,而第二个则是window var name = 'window' var person = { name :'Alan', sayOne:function () { console.log(this.name) }, sayTwo:functi

  • 详解JS构造函数中this和return

    先看一段代码, function Foo(name,age){ this.name=name; this.age=age; } var foo=new Foo("Tom",14); foo.name;//Tom foo.age;//14 使用构造函数实例化发生的流程: 1.建立一个foo的空对象. 2.将构造函数中的Foo的this指向对象foo. 3.foo的_proto_属性指向Foo函数的prototype原型. 4.执行构造函数中的代码. 相对于普通函数,构造函数中的this是

  • JavaScript this在函数中的指向及实例详解

    JavaScript this在函数中的指向及实例详解

    一.this,其实可以类比成人 说到this的话,我们在js中主要研究的都是函数中的this,在javascript中,this代表当前行为的执行主体,而context代表的是当前行为执行的的环境(区域). 例如男神在北理珠吃饭,这句话分别代表的含义如下 男神 -->> 主体(this) 吃饭 -->> 函数(function) 北理珠 -->> 环境(context) -->>说明:吃饭是函数,男神是函数的主体,北理珠就是当前行为的执行环境(context

  • Javascript中函数分类&this指向的实例详解

    Javascript中函数分类&this指向的实例详解

    JS中定义函数的三种方式 通过实例来说明吧 <script> //method1 function fn() { console.log('fn created '); } //method2 var fn2 = function () { console.log('fn2 created'); } //method3 var fn3 = new Function('test', 'console.log(test);'); fn3('fn3 test'); console.dir(fn3);

  • JavaScript 中this指向问题案例详解

    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • Python中zip()函数的解释和可视化(实例详解)

    zip()的作用 先看一下语法: zip(iter1 [,iter2 [...]]) -> zip object Python的内置help()模块提供了一个简短但又有些令人困惑的解释: 返回一个元组迭代器,其中第i个元组包含每个参数序列或可迭代对象中的第i个元素.当最短的可迭代输入耗尽时,迭代器将停止.使用单个可迭代参数,它将返回1元组的迭代器.没有参数,它将返回一个空的迭代器. 与往常一样,当您精通更一般的计算机科学和Python概念时,此模块非常有用.但是,对于初学者来说,这段话只会引发更

  • jQuery中ajax - get() 方法实例详解

    jQuery中ajax - get() 方法实例详解

    在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

  • Golang 中反射的应用实例详解

    Golang 中反射的应用实例详解

    目录 引言 Golang类型设计原则 Golang 中为什么要使用反射/什么场景可以(应该)使用反射 举例场景: 反射的基本用法 反射的性能分析与优缺点 测试反射结构体初始化 测试结构体字段读取/赋值 测试结构体方法调用 优缺点 反射在 okr 中的简单应用 结论 引言 首先来一段简单的代码逻辑热身,下面的代码大家觉得应该会打印什么呢? type OKR struct { id int content string } func getOkrDetail(ctx context.Context,

  • Java中的动态和静态编译实例详解

    Java中的动态和静态编译实例详解 首先,我们来说说动态和静态编译的问题. Q: java和javascript有什么区别?    总结了一下:有以下几点吧: 1.首先从运行环境来说java代码是在JVM上编译成class文件,而javascript则直接在浏览器上加载运行. 2.由第一点可看出,java代码需要编译,而javascript不需要编译. 3.从语言性质来说,java是一种高级编程语言,对变量检查要求严格,javascript只是一个简单的解释性的脚本语言,对变量检查及要求很弱.

  • IOS 开发中画扇形图实例详解

    IOS 开发中画扇形图实例详解

    IOS 开发中画扇形图实例详解 昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要了解一个uiview的方法 -(void)drawRect:(CGRect)rect 我们知道了这个方法,就可以在自定义UIView的子类的- (void)drawRect:(CGRect)rect里面绘图了,关于drawrect的调用周期,网上也是一找一大堆,等下我会整理一下,转载一篇供你们参考.

  • IOS 调整内存中的图片大小实例详解

    IOS 调整内存中的图片大小实例详解 在从网路download图片,或者从相册读取图片的时候,如果ImageView的本身就是固定的300*200,那么载入2000*2000的图片是很浪费内存的. 2000*2000的内存占用是2000*2000*4bit 以下两个函数可以用来创建一个新的按照固定大小的图片.简单来说,就是Core Graphics来创建一个bitmap,然后生成一个图片. - (UIImage*)imageWithImage:(UIImage*)image scaledToSi

随机推荐