javascript中 this 指向问题
前言
this是执行上下文环境的一个属性,而不是某个变量对象的属性。
在全局代码中,this始终是全局对象本身,这样就有可能间接的引用到它了。
在通常的函数调用中,this是由激活上下文代码的调用者来提供的,即调用函数的父上下文(parent context )。this取决于调用函数的方式。
function函数里的this指向,由函数的调用方式决定:
- 如果
new
关键词出现在被调用函数的前面,那么JavaScript引擎会创建一个新的对象,那么函数中的this
指向的就是这个新创建的对象; - 如果通过
bind
的方式得到的函数,那么该函数中的this
指向bind
的第一个参数; - 如果通过
apply
、call
的方式触发函数,那么函数中的this
指向传入函数的第一个参数; - 如果通过某个对象使用句点符号触发函数,那么函数中的
this
指向该对象; - 如果直接触发函数,那么函数中的
this
指向全局对象(在浏览器中指向window
,在node.js中指向global
);
非函数里的this指向:
- 不在函数里的this指向全局对象(在浏览器中指向
window
,在node.js中指向global);
详细分析this指向的这5种情况:
1、new 关键字,作为构造器调用的函数中的this
如果
new
关键词出现在被调用函数的前面,那么JavaScript
引擎会创建一个新的对象,那么函数中的this
指向的就是这个新创建的对象;
function Cat(name) {var _this = this;this.name = name;this.test = function() {console.log(`this equal _this: ${_this === this}`);console.log(`this euqal window: ${this === window}`);}
}
var mi = new Cat('mi');
mi.test(); // "this equal _this: true"// "this euqal window: false"
var test1 = mi.test;
test1();// "this equal _this: false"// "this euqal window: true"
复制代码
2、bind 指定this
var obj2 = {};
function thisFunc2() {console.log(`this2 equal window: ${this===window}`);console.log(`this2 equal obj2: ${this===obj2}`);
};var thisFunc22 = thisFunc2.bind(obj2);
thisFunc2();// "this2 equal window: true"// "this2 equal obj2: false"
thisFunc22();// "this2 equal window: false"// "this2 equal obj2: true"
复制代码
3、call、apply重定向this
如果通过
apply
、call
的方式触发函数,那么函数中的this
指向传入函数的第一个参数;
var GlobalName = 'globalName';
var obj3 = 'sofia';
function thisFunc3(a) {console.log(`this3'Name: ${this}`);console.log(`a: ${a}`);
}var thisFun33 = thisFunc3.bind(obj3, 4);
thisFun33.call(GlobalName, 3);// "this3'Name: sofia"// "a: 4"thisFun33();// "this3'Name: sofia"// "a: 4"
复制代码
4、对象属性的方法
var obj4 = {thisFunc4: function () {console.log(`this4 equal obj4: ${this===obj4}`);}
};
obj4.thisFunc4(); // "this4 equal obj4: true"
复制代码
var obj5 = {};
function thisFunc5 () {console.log(`this5 equal obj5: ${this===obj5}`);
}
obj5.thisFunc5 = thisFunc5;
obj5.thisFunc5(); // "this5 equal obj5: true"
复制代码
var obj6 = {};
obj6.thisFunc6 = function () {console.log(`this6 equal obj6: ${this===obj6}`);
}
obj6.thisFunc6(); // "this6 equal obj6: true"
复制代码
var obj7 = {}, obj77 = {};
obj7.thisFunc7 = function () {console.log(`this7 equal obj7: ${this===obj7}`);console.log(`this7 equal obj77: ${this===obj77}`);
}
var thisFunc77 = obj7.thisFunc7.bind(obj77)
thisFunc77();
// "this7 equal obj7: false"
// "this7 equal obj77: true"
复制代码
5、直接调用
function thisFunc1() { console.log(`this1 equal window: ${this===window}`);
};
thisFunc1(); // "this1 equal window: true"
复制代码
或者换种写法:
var obj8 = {thisFunc8: function(){console.log(`this8 equal obj8: ${this===obj8}`);console.log(`this8 equal window: ${this===window}`);}
}
obj8.thisFunc9 = thisFunc77;
obj8.thisFunc9();
// "this7 equal obj7: false"
// "this7 equal obj77: true"var thisFunc88 = obj8.thisFunc8;
thisFunc88();
// "this8 equal obj8: false"
// "this8 equal window: true"
复制代码
this指向了解测试
题目1. this指针
function logName(){console.log(this.name);
}
function doFun1(fn){fn();
}
function doFun2(o){o.logName();
}
var obj = {name: "LiLei",logName: logName
};
var name = "HanMeiMei";
doFun1(obj.logName);
doFun2(obj);
复制代码
结果
HanMeiMei
--------------------------------------------
LiLei
复制代码
题目2.call、apply修改this指向
function fun(somthing) {console.log(`name: ${this.name}, somthing: ${somthing}`);
};function bindFun(fn, obj) {return function () {return fn.apply(obj, arguments);}
}
var obj = { name: "LiLei" };
var bar = bindFun(fun, obj);
console.log(bar);
var b = bar('Sofia');
复制代码
结果
function () {return fn.apply(obj, arguments);
}
--------------------------------------------
name: LiLei, somthing: Sofia
复制代码
题目3.立即执行函数
function logName() {console.log(this);console.log(this.name);
}
var name = "XiaoMing";
var LiLei = { name: "LiLei", logName: logName };
var HanMeiMei = { name: "HanMeiMei" };
(HanMeiMei.logName = LiLei.logName)();
复制代码
结果
window
--------------------------------------------
XiaoMing
复制代码
javascript中 this 指向问题相关推荐
- datagridview 当前上下文中不存在bind_全面解析JavaScript中this指向问题
this指向 参考文章: * this JavaScript中this指向分为以下几种情况: 普通函数或作为对象属性 事件绑定 构造函数 箭头函数 call/apply/bind指定 下面我们来进行一 ...
- 图解javascript中this指向
JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些 ...
- javascript中this指向问题(es5)
与我们常见的很多语言不同,JavaScript 函数中的 this 指向并不是在函数定义的时候确定的,而是在调用的时候确定的.换句话说,函数的调用方式决定了 this 指向. JavaScript 中 ...
- proto文件支持继承吗_搞懂 Javascript中this 指向及继承原理
在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的new 到底是干什么的 一.什么是 JS 原型链? 我们知道 JS 有对象,比如 var obj ...
- JavaScript中this指向问题
函数中的this指向: DOM(文档对象模型的顶级对象是:document) BOM(浏览器对象模型的顶级对象是:window) 普通函数中的this指向-------window 对象.方法中的th ...
- Javascript中this指向丢失原因及解决办法详解
大家都知道JS中的this关键字通常出现在函数或者方法中,用来指向调用该函数或者方法的对象.但是在很多时候this的指向却并不总是如我们所愿,这一篇文章就一起来看看到底该如何判断this所指向的对象, ...
- JavaScript中this指向
一.重点来了,this指向问题: 1.this指向之普通函数. 2.this指向之对象 3.this指向之构造函数 4.this指向之(call,apply)动态更改this指向. 二.具体分析如下 ...
- JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
前 言 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于汇编语言这样的面 ...
- $.ligerdialog.open中确定按钮加事件_彻底搞懂JavaScript中的this指向问题
JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成. 想要理解this,你可以先记住以下两点: ...
最新文章
- 堆栈的应用——用JavaScript描述数据结构
- php error log 函数,php日志函数error_log如何使用 php日志函数error_log用法介绍
- 安卓用户又少了一项自由,Android 11不再支持更改默认相机程序
- JavaOne 2012:非阻塞数据结构如何工作?
- Linux centos开机执行JAR Shell脚本
- 小程序秒杀活动服务器,一套实用的小程序秒杀活动方案,亲这边建议你收藏哦...
- BZOJ 2440 【中山市选2011】 完全平方数
- getResource()和getResourceAsStream以及路径问题
- 如何使非域模式下的组策略对管理员帐号无效
- vs2017如何编写python_vs2017添加python的方法
- 啦啦外卖独立版40.4最新外卖源码全开源
- Mac OS X 上用 otool 代替 ldd
- 如何写一篇综述论文、浅谈
- 概率论基础 - 5 - 马尔可夫不等式
- C语言函数:even(n),fflush(stdin)
- 什么是Autorun病毒?它的运作原理是什么?如何手工清除?
- HDU2881 Jack's struggle (LIS)
- 对指定网站渗透的一些总结
- mui-添加自定义图标(彩色)
- 这个世界有病,我们都有病
热门文章
- oracle导入java包时出错,Oracle导入导出的常见错误
- mysql 磁盘组_AIX使用LV创建ASM磁盘组
- 动物麻醉剂量和途径相关要点
- array,arraylist,string的总结
- hyperworks2017安装教程
- 安装 | Android studio连接不上真机解决办法(电脑安装虚拟机不成功的情况下)
- 光流 | 基于KLT(Kanade-Lucas-Tomasi)特征点跟踪算法(附代码,可扩展)
- pythonsubprocess执行多条shell命令_python中subprocess批量执行linux命令
- Unity3D的一些坑
- Python 生成器(yield)