javascript:this指向
this常见指向问题
this的用法
1.直接在函数中使用 谁调用这个函数this就指向谁
2.对象中使用, 一般情况下指向该对象
3.在构造函数中使用
改变this的指向,两种方法的作用都是相同的,传递的写法不同而已。
call -- (指向谁,参数1,参数2......)
apply -- (指向谁,[参数1,参数2]) 数组的形式
1. this与普通函数执行
- 当一个函数执行不带任何修饰时,使用默认绑定规则。
- 默认绑定:函数体如果在非严格模式下,this绑定到window,严格模式下绑定到undefined。
// 1.1 函数体在非严格模式下的全局函数执行
function fn () {
console.log(this)
}
fn1() // => window
// 1.2 函数体在严格模式下的全局函数执行
'use strict'
function fn () {
console.log(this)
}
fn() // => undefined
// 1.3 函数体在非严格模式下的函数中的函数执行
function fn1 () {
function fn2 () {
console.log(this)
} fn2()
}
fn1() // => window
// 1.4 函数体在严格模式下的函数中的函数执行
'use strict'
function fn1 () {
function fn2 () {
console.log(this)
} fn2()
}
fn1() // => undefined
// 1.5 函数体在非严格模式下,而函数调用在严格模式下时, this依然指向window
function fn () {
console.log(this)
}
(function () {
'use strict'
fn() // => window
})()
2. this与对象中的方法执行
2.1 无论是否是严格模式,当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
// 2.1.1 函数直接在对象中声明
var obj = {
a: 1,
test: function () {
console.log(this.a)
}
} obj.test(); // => 1
// 2.1.2 函数先声明,再由对象引用
function test () {
console.log(this.a)
}
var obj = {
a: 1,
test: test
} obj.test(); // => 1
2.2 对象属性引用链中只有最顶层或者说只有最后一层会影响调用位置
// 2.2.1 多层对象引用,this指向离函数调用最近的对象
function test () {
console.log(this.a)
}
var obj2 = {
a: 2,
test: test
}
var obj1 = {
a: 1,
obj2: obj2
}
obj1.obj2.test() // => 2
2.3 隐式丢失:被隐式绑定的函数可能会丢失绑定对象。
// 2.3.1 将obj.foo当作函数别名赋值给一个变量
function foo () {
console.log(this.a)
}
var obj = {
a: 2,
foo: foo
}
var bar = obj.foo // 函数别名
var a = '全局属性'
bar() // => 全局属性
在2.3.1中,虽然bar是obj.foo的一个引用,但是实际上,它引用的是foo函数本身,因此此时的bar() 其实是一个不带任何修饰的普通函数调用。因此也使用默认绑定规则。
// 2.3.2 将obj.foo当作bar的回调函数。
function foo () {
console.log(this.a)
}
function bar (fn) {
fn()
}
var obj = {
a: 2,
foo: foo
}
var a = '全局属性'
bar(obj.foo) // => 全局属性
3.this与call,apply
显示绑定规则:this指向第一个参数。
3.1 call
// 3.1.1
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function(school,grade) {
console.log(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
}
}
var xh = {
name : "小红",
gender : "女",
age : 12
} xw.say.call(xh, "实验小学", "六年级") // => 小红 , 女 ,今年12 ,在实验小学上六年级
在3.1.1代码示例中,当调用say时强制把它的this绑定到了xh上。
3.2 apply
// 3.2.1
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function(school,grade) {
console.log(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
}
}
var xh = {
name : "小红",
gender : "女",
age : 12
} xw.say.apply(xh,["实验小学","六年级"]) // => 小红 , 女 ,今年12 ,在实验小学上六年级
javascript:this指向的更多相关文章
- 图解javascript this指向什么?
JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有 ...
- javascript this指向
this对象是什么: this对象是与运行时函数执行的上下文绑定的.这句话其实已经很好的解释了this对象,为我们确定this指明了方向!但是需要注意的是:由于javascript具有动态性(解释执行 ...
- 一分钟搞懂 JavaScript this 指向问题
关于Javascript的this指向问题,网络上有很多分析文章,写的很好,比如这里和这里 我这里做一个简单的总结. 箭头函数的 this 箭头函数内的this指向外层函数定义时所在的作用域.如果没有 ...
- JavaScript this指向相关内容
1,默认绑定this指向windw对象 看代码: function test(C){ var a = 123 function b(){}; } 在预编译环节当中. OA{ arguments:[1] ...
- 理解javascript this指向
匿名函数中的this指向window对象 这句话很经典: 每个函数在调用时,其活动对象都会自动获取两个特殊的变量:this和arguments.内部函数在搜索这两个变量时,只会搜到其活动对象为止,因此 ...
- JavaScript this指向问题
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定,this最终指向调用它的对象. 1.函数调用模式: 当一个函数并非一个对象的属性时,那么它就是被当做函数来调用的.在此种模式下, ...
- Javascript定时器(二)——setTimeout与setInterval
一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...
- JavaScript Tips
Tips: return false - event.preventDefault(); //阻止默认行为 P.S 阻止a标签的跳转 - event.stopPropagation(); //阻止事件 ...
- javascript值和引用
JavaScript引用指向的是值. 简单值(即标量基本类型值,基本类型值,js中6类,null.undefined.boolean.number.string和symbol)总是通过值复制的方式来赋 ...
- 《你不知道的JavaScript》整理(五)——值与原生函数
一.值 1)数字 JavaScript只有一种数值类型:number(数字),包括"整数"和带小数的十进制数. //数字的语法 a.toExponential(); // &quo ...
随机推荐
- powerDesigner 把name项添加到注释(comment)
第一次写博客,分享一点经验吧,平时大家用powerDesigner的时候,pd是不会把name项默认添加到comment的,所以生成的数据库表里面也没有中文字段的注释. 我在网上查了一下.有解决方案了 ...
- HTML元素ID和JS方法名重复,JS调用失败
HTML元素ID和JS方法名重复时,JS中的重名方法无法被找到,不能执行. 修改ID或者方法名,两者不一致即可.
- 深度学习环境配置:Ubuntu16.04下安装GTX1080Ti+CUDA9.0+cuDNN7.0完整安装教程(多链接多参考文章)
本来就对Linux不熟悉,经过几天惨痛的教训,参考了不知道多少篇文章,终于把环境装好了,每篇文章或多或少都有一些用,但没有一篇完整的能解决我安装过程碰到的问题,所以决定还是自己写一篇我安装过程的教程, ...
- Ubuntu 12.04 安装Redis并设置主从复制
今天想在Ubuntu上安装一个Redis服务器并配置Master-Slave,一开始懒得连VPN就查了一些国内的文章,不知道是没有亲自验证过的转载文章,还是版本问题造成的,发现按照步骤都没能成功完成配 ...
- 06-02 Java值传递、数据加密
值传递: /* 思考题1:看程序写结果,然后分析为什么是这个样子的.并画图讲解.最后总结Java中参数传递规律. Java中的参数传递问题: 基本类型:形式参数的改变对实际参数没有影响.基本类型传递的 ...
- (转)Python: super 没那么简单
原文:https://mozillazg.com/2016/12/python-super-is-not-as-simple-as-you-thought.html python 约定¶ 单继承¶ 多 ...
- [Fatal Error] :3:13: Open quote is expected for attribute "{1}" associated with an element type "id".
用DOM解析XML时出现了如下错误: [Fatal Error] :3:13: Open quote is expected for attribute "{1}" associa ...
- C#基础篇五值类型和引用类型
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace P01M ...
- Django开发密码管理表实例【附源码】
文章及代码比较基础,适合初.中级人员,高手略过 阅读此篇文章你可以: 获取一个Django实现增删改查的案例源码 了解数据加密的使用场景和方法以及如何在Python3中使用 背景介绍 DBA需要维护一 ...
- [Python学习笔记-003] 使用PyOTP获取基于OTOP算法的动态口令
建立安全的VPN连接,不仅需要输入用户名和密码,还需要输入动态口令(token).作为一个懒人,我更喜欢什么手工输入都不需要,既不需要输入password,也不需要输入token.也就是说,只需一个命 ...