javaScript中this的指向？
javaScript中this对象是在运行时基于函数的执行环境绑定的，在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。
但在实际中，代码环境复杂，this的指向并非那么直接判断出来。下面来做一下总结。
1，全局执行环境下的普通函数
function f1 () {
console.log(this)
}
function f2 () {
'use strict'
console.log(this)
}
f1() // window
f2() // undefined
分为严格模式和非严格模式。非严格模式下等于window，严格模式下为undefined。
2，事件对象中的this
this指的是事件对象本身，是指event.target
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div1">我是一个div</div>
<script>
window.id = 'window'
document.getElementById('div1').onclick = function (){
alert(this.id) // 输出div1 }
</script>
</body>
</html>
3，对象中的方法引用
const foo = {
bar: ,
fn: function() {
console.log(this)
console.log(this.bar)
}
}
foo.fn() // this指的是foo
var fn1 = foo.fn
fn1() // this指的是window
4，构造函数中的this
// this指instance
function Foo() {
this.bar = "ceshi"
}
const instance = new Foo()
console.log(instance.bar) // this指的是 {}
function Foo(){
this.user = "ceshi"
const o = {}
return o
}
const instance = new Foo()
console.log(instance.user)
这里的this之所以不同是由构造返回值是否是对象导致的
5，丢失的this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div1">我是一个div</div>
<script>
let getId = document.getElementById
console.log(getId('div1')) // 报错，报错这是因为document.getElementById方法内的this指向window导致的
// 修复
document.getElementById = (function(func){
return function(){
return func.apply(document,arguments)
}
})(document.getElementById)
let getId = document.getElementById
console.log(getId('div1'))
</script>
</body>
</html>
6，借助bind、Object.prototype.call和Object.prototype.apply改变this的指向
Object.prototype.call和Object.prototype.apply的是后者参数为数组，前者为多个参数。
用代码来总结：
const target = {}
fn.call(target, 'arg1', 'arg2')
相当于：
const target = {}
fn.apply(target, ['arg1', 'arg2'])
相当于：
const target = {}
fn.bind(target, 'arg1', 'arg2')()
借助call改变
const foo = {
name: 'ceshi',
logName: function() {
console.log(this.name)
}
}
const bar = {
name: 'mike'
}
console.log(foo.logName.call(bar)) // mike
7，其他一些复杂的场景
const foo = {
fn: function () {
setTimeout(function () {
console.log(this)
})
}
}
foo.fn() // this===window
let，const不会挂在window上面，而var可以
const a =
let aa =
var b =
function too(){
console.log(this.a)
console.log(this.aa)
console.log(this.b)
}
too()
对象嵌套中的this
const person = {
name: 'ceshi',
brother: {
name: 'zhen',
fn: function() {
return this.name
}
}
}
console.log(person.brother.fn()) // zhen
更复杂的情景
const o1 = {
text: 'o1',
fn: function () {
return this.text
}
}
const o2 = {
text: 'o2',
fn: function () {
return o1.fn()
}
}
const o3 = {
text: 'o3',
fn: function () {
var fn = o1.fn
return fn()
}
}
console.log(o1.fn()) // o1
console.log(o2.fn()) // o1
console.log(o3.fn()) // undefined
箭头函数的this提前绑定好
const foo = {
fn: function () {
setTimeout(() => {
console.log(this)
})
}
}
console.log(foo.fn()) // {fn: ƒ}
8，通过 call、apply、bind 绑定的情况称为显式绑定；根据调用关系确定的 this指向称为隐式绑定。那么哪一个优先级更高呢？
function foo (a) {
console.log(this.a)
}
const obj1 = {
a: ,
foo: foo
}
const obj2 = {
a: ,
foo: foo
}
obj1.foo.call(obj2) //
obj2.foo.call(obj1) //
显式绑定的优先级高于隐式绑定。
javaScript中this的指向？的更多相关文章
- javascript中this的指向
作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...
- Javascript中的this指向。
一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...
- JavaScript中 this 的指向
很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...
- 前端面试之JavaScript中this的指向【待完善！】
JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...
- JavaScript中的this指向
this是谁 技术一般水平有限,有什么错的地方,望大家指正. this代指当前对象super调用父类的构造函数,应表会运网数物,加载驱动建立链接执行SQL处理结果,直到现在每想起这三点就能想起我上大学 ...
- Javascript 中的this 指向的对象，你搞清楚了吗？
Javascript 中的this 总让人感到困惑,你能分清以下三种test1(),test2(),test3() 情况下的输出吗? 注:以下Javascript运行环境中为浏览器 //1 this在 ...
- javascript中的this指向问题
在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的 ...
- 谈谈 JavaScript 中的 this 指向问题
JavaScript 中的 this 为一个重难点,它不像静态语言 C#.Java 一样,就表示当前对象.而在 JS 中, this 是运行时确定,而并非定义时就已确定其值. 谈起 this ,必须少 ...
- JavaScript中this的指向问题
this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑 ...
- 轻松几句搞定【Javascript中的this指向】问题
this关键字在JavaScript中扮演了至关重要的角色,每次它的出现都伴随着它的指向问题,这也是很多初学者容易出错的地方. 不过,这篇文章将会带你一次性搞定this指向的问题,望能给大家提供帮助! ...
随机推荐
- @media screen 自适应笔记
在css中使用@media screen 通过检索宽度 对应改变html中class的css属性. 1280分辨率以上(大于1200px) @media screen and (min-width:1 ...
- C语言：判断字符串是否为回文，-函数fun将单向链表结点数据域为偶数的值累加起来。-用函数指针指向要调用的函数，并进行调用。
//函数fun功能:用函数指针指向要调用的函数,并进行调用. #include <stdio.h> double f1(double x) { return x*x; } double f ...
- JavaSE复习~运算符与表达式
运算符 运算符:进行特定操作的符号 表达式:用运算符进行操作的式子 算术运算符 首先是加减乘除:+.-.*./还有取余:% 整数进行算术操作得到的还是整数,例如整数使用 / 得到的是整数(商的整数部分 ...
- Spring Boot 2.x 入门前的准备-安装 Java JDK
本章节介绍在以 window7.window10 为代表的 window 和 mac book 下安装 Java 编译和开发环境JDK 1.8,在 window 上安装 Java JDK 的步骤,本章 ...
- es 搜索功能简介
DSL 语法介绍 语法 范围 /_search 集群上搜索所有的索引 /index1/_search index1 /index1,index2/_search index1和index2 /inde ...
- CF908D 【New Year and Arbitrary Arrangement】
蒟蒻渣渣禹小心翼翼发布题解.... 这道题,嗯,期望,dp,好,我们有思路了.... however, 主要问题在于字符串无限延伸,so,我们需要考虑记录前缀的关键量来为DP设置终止状态. 我们不妨设 ...
- Update(stage3)：第1节 redis组件：7、持久化
7.redis的持久化 由于redis是一个内存数据库,所有的数据都是保存在内存当中的,内存当中的数据极易丢失,所以redis的数据持久化就显得尤为重要,在redis当中,提供了两种数据持久化的方式, ...
- SpringBoot常用注解解析
@RestController 将返回的对象数据直接以 JSON 或 XML 形式写入 HTTP 响应(Response)中.绝大部分情况下都是直接以 JSON 形式返回给客户端,很少的情况下才会以 ...
- C/C++网络编程8——多进程服务器端之销毁僵尸进程
上一节提到,当子进程执行结束,父进程还在执行,在父进程结束之前子进程会成为僵尸进程,那么怎么销毁僵尸进程呢?父进程主动接收子进程的返回值. 销毁僵尸进程的方法: 1:使用wait函数 2:使用wait ...
- Redis的人门以及使用
1.Redis的安装 1.1centos下安装Redis 1.1.1 安装gcc 1.1.2 安装过程 图一 图三 2.Redis的启动 2.1 前端模式启动(不推荐) 截图 2.2 后端模式(推荐 ...