JavaScript 中this指向问题案例详解_javascript技巧

来源:脚本之家  责任编辑:小易  

总结

全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call()、apply()、bind() ➡️ 第一个参数

全局环境

无论是否在严格模式下,this 均指向 window 对象。

console.log(this === window)  // true
// 严格模式
'use strict'
console.log(this === window)  // true

普通函数

    正常模式 this 指向 window 对象
    function test() {
      return this === window
    }
    
    console.log(test())  // true
    
    严格模式 this 值为 undefined
    // 严格模式
    'use strict'
    
    function test() {
      return this === undefined
    }
    
    console.log(test())  // true
    

构造函数

函数作为构造函数使用时,this 指向构造出来的实例。

function Test() {
  this.number = 1
}

let test1 = new Test()

console.log(test1.number)  // 1

箭头函数

函数为箭头函数时,this 指向函数定义时上一层作用域中的 this 值。

let test = () => {
  return this === window
}

console.log(test())  // true
let obj = {
  number: 1
}

function foo() {
  return () => {
    return this.number
  }
}

let test = foo.call(obj)

console.log(test())  // 1

对象的方法

函数作为对象的方法使用时,this 指向该对象。

let obj = {
  number: 1,
  getNumber() {
    return this.number
  }
}

console.log(obj.getNumber())  // 1

call()、apply()、bind()

调用函数的 call()、apply() 方法时,该函数的 this 均指向传入的第一个参数。 调用函数的 bind() 方法时,返回的新函数的 this 指向传入的第一个参数。
let obj = {
  number: 1
}

function test(num) {
  return this.number + num
}

console.log(test.call(obj, 1))  // 2

console.log(test.apply(obj, [2]))  // 3

let foo = test.bind(obj, 3)
console.log(foo())  // 4

到此这篇关于JavaScript 中this指向问题案例详解的文章就介绍到这了,更多相关JavaScript 中this指向问题内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:Javascript中函数分类&this指向的实例详解JavaScript函数中this指向问题详解JavaScript中的this指向问题详解JavaScript逐点突破系列之this是什么7道关于JS this的面试题,你能答对几个

  • 本文相关:
  • 一句话javascript表单验证代码
  • javascript数组迭代方法详解
  • 父元素与子iframe相互获取变量和元素对象的具体实现
  • javascript获取dom的下一个节点方法
  • javascript实现图片本地预览功能【不用上传至服务器】
  • 详解es6实现类的私有变量的几种写法
  • javascript设计模式之单例模式实例
  • swiper 解决动态加载数据滑动失效的问题
  • javascript string字符串优化问题
  • js 获取后台的字段 改变 checkbox的被选中的状态 代码
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript中函数分类&this指向的实例详解javascript函数中this指向问题详解javascript中的this指向问题详解javascript逐点突破系列之this是什么7道关于js this的面试题,你能答对几个一句话javascript表单验证代码javascript数组迭代方法详解父元素与子iframe相互获取变量和元素对象的具体实现javascript获取dom的下一个节点方法javascript实现图片本地预览功能【不用上传至服务器】详解es6实现类的私有变量的几种写法javascript设计模式之单例模式实例swiper 解决动态加载数据滑动失效的问题javascript string字符串优化问题js 获取后台的字段 改变 checkbox的被选中的状态 代码js刷新页面方法大全js删除数组里的某个元素方法js中settimeout()的用法详解js页面跳转常用的几种方式js截取字符串常用方法详细整理js数组与字符串的相互转换方法js打开新窗口的2种方式js设置cookie、读取cookie、删除js保留两位小数方法总结js 将json字符串转换为json对象的js+html5实现异步上传图片显示上传文件进js实现抽奖功能原生js实现拖拽功能跟我学习javascript的闭包d3.js入门教程之数据绑定详解在ie下获取object(activex)的param的代ionic自定义subheader的最佳解决方案利用javascript打开模态对话框(示例代码)js判断移动端横竖屏视口检测实现的几种方在html页面上拖放移动标签
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved