js this指向分析
一、普通函数
1、this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁;
实际上this的最终指向的是那个调用它的对象
1 1) function a() { 2 var name = 'xiaoming' 3 console.log(this) // window 4 console.log(this.name) // undefined 5 } 6 7 window.a() 8 9 2) var b = { 10 name: 'xiaoming', 11 like: function() { 12 console.log(this) // b 13 } 14 } 15 b.like() 16 17 3) var c = { 18 name: 'xiaoming', 19 intro: { 20 like: 'drinking', 21 age: function() { 22 console.log(this) 23 } 24 } 25 } 26 c.intro.age() // intro 27 var d = c.intro.age 28 d() // window ** this的最终指向的是那个调用它的对象 , 此时通过赋值后调用他的是window
二、构造函数
1、new 操作符作用:
new操作符会创建一个对象实例
具体如下:
1)创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2)属性和方法被加入到 this 引用的对象中。
3)新创建的对象由 this 所引用,并且最后隐式的返回 this 。
1 var obj = {}; 2 obj.__proto__ = Base.prototype; 3 Base.call(obj);
2、call 、apply 、bind 用法
这三种方法都是函数实例上的方法,都可以改变this上下文环境
1)call、apply 如果第一个参数传null , 则会将this指向全局环境 ; apply 以数组的形式传递多个参数
2) bind 会创建一个新的函数体,通常用作绑定原来函数的this值
1 // call Function.call(thisObj,arg1,arg2,arg3) 2 // call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 3 4 1) var f = { 5 name: 'xiaoming', 6 intro: { 7 like: 'drinking', 8 age: function() { 9 console.log(this.like) 10 } 11 } 12 } 13 14 var g = f.intro.age 15 f.intro.age() // drinking 16 g() // undefined 17 g.call(intro) // 将this指针指向改为指向intro drinking 18 19 2) // bind 20 var h = { 21 name: 'xiaoming', 22 intro: { 23 like: 'drinking', 24 age: function() { 25 console.log(this.like) 26 } 27 } 28 } 29 var i = f.intro.age 30 var j = i.bind(intro) 31 j() // bind 需要调用才能执行
3)构造函数返回对象
当构造函数内部返回对象时,此时 this 指向返回的那个对象
1 function K() { 2 this.name = 'xiaoming' 3 return {} 4 } var l = new K() console.log(l.name) // undefine
三、箭头函数
1) “箭头函数” 没有自己的this,其派生的this遵循词法作用域规则,因此this解析时总是指向其外层作用域的this
2) “箭头函数”的this,总是指向定义时所在的对象,而不是运行时所在的对象
1 var o = { 2 a: 12, 3 b: { 4 a: 11, 5 fn: () => { 6 console.log(this.a) // this 指向外层的window 7 } 8 } 9 } 10 o.b.fn()
1 function P(){ 2 this.index = 1; 3 setInterval(() => console.log(this.index++) , 100) // ---> this 指向 P 4 } 5 var exp1 = new P() 6 console.log(exp1()) 7 8 function Q(){ 9 this.index = 1; 10 setInterval( 11 function(){ 12 console.log(this.index++) // ---> this 指向 window 13 }, 14 100 15 ) 16 } 17 var exp2 = new Q() 18 console.log(exp2())
参考:
1)图解javascript this指向什么?
2)箭头函数中this的用法
3)关于箭头函数this的理解几乎完全是错误的
转载于:https://www.cnblogs.com/worldly1013/p/7514236.html
js this指向分析相关推荐
- Incapsula js加密混淆分析
js破解之Incapsula cdn 网址:https://booking.volotea.com 上抓包,3次请求才返回正常的数据,本文目的分析图中这个参数值 从上一条数据看到js代码 简单分析下e ...
- 移动端开发基本知识之touch.js,FastClick.js源码分析
问题1:300ms延迟问题指的是? 不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). ...
- 淘淘商城第103讲——js跨域分析
通过前几讲的学习,我有理由相信大家都写完了用户登录这个接口,登录的时候我们把token写入到了Cookie当中,登录成功后,我们查看Cookie的信息,如下图所示,发现是有token信息的. 我们回到 ...
- video.js 源码分析(JavaScript)
video.js 源码分析(JavaScript) 组织结构 继承关系 运行机制 插件的运行机制 插件的定义 插件的运行 控制条是如何运行的 UI与JavaScript对象的衔接 类的挂载方式 存储 ...
- impress.js 源码分析
impress.js 源码分析 之前做展示用幻灯片,我一直热衷于使用PPT,刚开始学习PPT时总是强行使用各种页面特效,越做越复杂.现在看来,学技术大概都要经历一个从简到繁再到简的过程吧.后来,无 ...
- 从恶意软件获得的新姿势——通过rundll32.exe执行js原理详细分析
今年7月份,国外研究机构发现了一个比较新型的恶意软件,这个恶意软件不会在系统上安装任何文件,而是藏身在windows的注册表中通过rundll32.exe执行JavaScript代码. 听上去确实很有 ...
- Vue.js 源码分析(五) 基础篇 方法 methods属性详解
methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...
- Vue.js 源码分析(二十三) 指令篇 v-show指令详解
v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...
- 瑞数(裁判文书)js的加密分析
抓了半年多的裁判文书突然停了,查看log发现HTTP响应码全是202,分析页面发现原网站在cookie上做了加密.经分析正确的请求流程如下 1. 请求首页,返回两个set-cookie响应头,cook ...
最新文章
- android的各种*.img 文件
- 动手---sbt(2)
- 基于visual Studio2013解决C语言竞赛题之1027 YN
- 大工17春计算机文化基础,大工17春《计算机文化基础》在线测试
- 关于servlet中出现GET方法不能应用于此url的解决办法
- 【开发工具】之source insight 4常用设置
- 一个tile布局的下拉框
- Python:Python3错误提示TypeError: slice indices must be integers or None or have an __index__ method解决办法
- CG之菲涅尔效果简单实现
- Unity应用架构设计(4)——设计可复用的SubView和SubViewModel(Part 2)
- 全网首发:怎样制作CDKEY(6)-CDKEY破解
- 什么是云计算架构和组件
- 中国被动元件市场规模调研与发展趋势预测报告2022版
- 2w 字长文带你搞懂 Linux 命令行
- c语言论坛编程,[原创]了解c语言
- 春节攻防战即将打响,想要弯道超车的商家们,准备好了吗?
- css的背景颜色有哪些,css背景颜色、背景图片,以及列表的多种样式
- 一条语句完成微信、支付宝支付,生成支付二维码
- 2022春招字节跳动校招内推码: UX8B35W
- 测量标准误(Standard Error of Measurement;SEm)
热门文章
- centos7安装mysql5.7视频_Centos7安装MySQL5.7版本详细步骤
- WebRTC直播技术方案
- ReactNative入门之android与rn初始化参数的传递
- php 参数 问号_php获取不到url问号之后的参数
- STM8学习笔记---定时器 TIM4功能实现
- Java对MongoDb的CURD操作
- Extjs 从grid中导出Excel表格。后台为C#(绝对好用)(按照自己的需求修改版本)...
- 安卓中的@Nullable和NonNull(NotNull) 等 注释
- 发布一个 Linux 下的 C++ 多线程库
- Spring boot配置log4j