javascript this指向总结
javascript this指向总结
1.单独的this,指向的是window这个对象
alert(this) // this -> window
2.全局函数中的this
function demo() {
// ‘use strict’; 严格模式
alert(this); // this -> window
}
demo();
在严格模式下,this是undefined.
3.函数调用的时候,前面加上new关键字
所谓构造函数,就是通过这个函数生成一个新对象,这时,this就指向这个对象。
function demo() {
//alert(this); // this -> object
this.testStr = ‘this is a test’;
}
let a = new demo();
alert(a.testStr); // ‘this is a test’
4.用call与apply的方式调用函数
call 和 apply 的作用,完全一样,唯一的区别就是在参数上面。
call 接收的参数不固定,第一个参数是函数体内 this 的指向,第二个参数以下是依次传入的参数。
apply接收两个参数,第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象(数组或者类数组)
/apply()方法/
function.apply(thisObj[, argArray])
/call()方法/
function.call(thisObj[, arg1[, arg2[, [,…argN]]]]);*
function demo() {
alert(this);
}
demo.call(‘abc’); // abc
demo.call(null); // this -> window
demo.call(undefined); // this -> window
改变 this 的指向(把 this 从 demo 指向到 abc )
方法借用( abc 只是借用 demo 方法)
5.定时器中的this,指向的是window
setTimeout(function() {
alert(this); // this -> window ,严格模式 也是指向window
},500)
6.元素绑定事件,事件触发后,执行的函数中的this,指向的是当前元素
window.onload = function() {
let $btn = document.getElementById(‘btn’);
$btn.onclick = function(){
alert(this); // this -> 当前触发
}
}
//jquery
$(’.btn’).click(function(){
alert(this); // this -> 当前触发
})
7.函数调用时如果绑定了bind,那么函数中的this指向了bind中绑定的元素
window.onload = function() {
let $btn = document.getElementById(‘btn’);
$btn.addEventListener(‘click’,function() {
alert(this); // window
}.bind(window))
}
8.对象中的方法,该方法被哪个对象调用了,那么方法中的this就指向该对象
let name = ‘finget’
let obj = {
name: ‘FinGet’,
getName: function() {
alert(this.name);
}
}
obj.getName(); // FinGet
let fn = obj.getName;
fn(); //finget this -> window
9.箭头函数调用
函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象!!!
由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向
(function() {
return [
(() => this.x).bind({ x: ‘inner’ })()
];
}).call({ x: ‘outer’ });
// [‘outer’]
在箭头函数里面,没有 this ,箭头函数里面的 this 是继承外面的环境。
let obj={
a:222,
fn:function(){
setTimeout(()=>{console.log(this.a)});
}
};
obj.fn(); // 222
这次输出 222 是因为,传给 setTimeout 的是箭头函数,然后箭头函数里面没有 this ,所以要向上层作用域查找,在这个例子上, setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj ,所以 setTimeout 里面的箭头函数的 this ,指向 obj 。所以输出 222 。
javascript this指向总结相关推荐
- JavaScript this指向相关内容
1,默认绑定this指向windw对象 看代码: function test(C){ var a = 123 function b(){}; } 在预编译环节当中. OA{ arguments:[1] ...
- JavaScript - this指向以及强行改变this指向
this 指向 -官方:指当前代码执行的上下文环境(context) -私人: 就是一个使用在作用域内(全局 / 函数内)的关键字 全局作用域 this ->在全局作用域内,this就是wind ...
- js this指向哪里 JavaScript this指向
非箭头函数中的this指向一般都是调用者 在非箭头函数中 谁调用了函数,那么函数的this指向就是谁 比如 let obj1 = { name:'obj1', ...
- 前端面试题之JavaScript【this指向】
JavaScript this指向 全局环境下:this 始终指向全局对象(window), 无论是否严格模式 console.log(this.document === document); // ...
- 《你不知道的JavaScript》整理(五)——值与原生函数
一.值 1)数字 JavaScript只有一种数值类型:number(数字),包括"整数"和带小数的十进制数. //数字的语法 var a = 5E10; // 500000000 ...
- 在JavaScript中使用“原型”还是“ this”?
之间有什么区别 var A = function () {this.x = function () {//do something}; }; 和 var A = function () { }; A. ...
- 【一针见血】 JavaScript this
JavaScript this 指向一站式解决 转载于:https://www.cnblogs.com/xueyejinghong/p/8403987.html
- 四十个非常实用的轻量级JavaScript库
流行的JavaScript库,如jQuery, MooTools, Prototype, Dojo和YUI等,完成起常见的JavaScript任务来得心应手.这些JS库为客户端动作(events).动 ...
- js this指向分析
一.普通函数 1.this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁: 实际上this的最终指向的是那个调用它的对象 1 1) function a() { 2 ...
最新文章
- shell最大出现和连续出现次数_从 1 到 n 整数中 1 出现的次数
- SpringBoot 并发登录人数控制
- mybatis自动生成代码工具
- io.h源码 检查文件是否存在
- kodi教程_KODI清理缓存插件安装设置教程
- 【大数据】大数据思维的十大核心原理
- SAP系统与MES系统的数据协同技术方案
- SSO 中间件 kisso
- python计算召回率代码_序列标注的准确率和召回率计算
- CentOS6和CentOS7进入单用户模式重置root密码
- 疫情下的思考:全球疫情带来的危机与机遇
- iphone 控制 android手机,新潮来袭:苹果手机控制安卓手机
- A股市场,价投者眼中的10大金股,值得收藏(名单)
- 香港服务器防攻击能力怎么样
- set工具集的基础使用
- Enterprise Architect 类关系对应解析
- 听《正面管教》,论如何教育孩子
- 北京周边自行车骑行线路大全
- Java27岁了--我与Java6年
- 计算机人文素养教案,小学信息技术课堂中人文素养的教学探究