this指向及改变this指向的方法
一、函数的调用方式决定了 this 的指向不同,但总的原则,this指的是调用函数的那个对象:
1.普通函数调用,此时 this 指向 全局对象window
function fn() {
console.log(this); // window
}
fn(); // window.fn(),此处默认省略window
2.在严格模式下"use strict",为undefined.
function foo(){
"use strict"; //表示使用严格模式
console.log(this); //在严格模式下this指向undefined
}
foo();
3.对象的方法里调用,this指向调用该方法的对象
let person = {
name:'Lucy',
age:,
say:function(){
console.log(this); //object person
console.log(this.name); //Lucy
}
}
person.say();
4.构造函数调用, 此时 this 指向 new出来的实例对象
function Person(age, name) {
this.age = age;
this.name = name
console.log(this) // 此处 this 分别指向 Person 的实例对象 p1 p2
}
var p1 = new Person(, 'zs')
var p2 = new Person(, 'ww')
5.通过事件绑定的方法, 此时 this 指向 绑定事件的对象
<body>
<button id="btn">hh</button>
<script>
var oBtn = document.getElementById("btn");
oBtn.onclick = function() {
console.log(this); // btn
}
</script>
</body>
6.定时器函数, 此时 this 指向 全局对象window
var name = "Tom";
var person = {
name:'Lucy',
age:,
say:function(){
console.log(this); //object person
console.log(this.name); //Lucy
setTimeout(function(){
console.log(this.name); //此处this指向全局对象window,故此时输出Tom
},)
}
}
person.say();
二、更改this指向的三个方法
1.call() 方法
call(thisScope, arg1, arg2, arg3...)
call,可以传入多个参数,改变this指向后立刻调用函数
var Person = {
name:"lixue",
age:
}
function fn(x,y){
console.log(x+","+y);
console.log(this);
}
fn("hh",);
没错,就像上面说的,普通函数的this指向window,现在让我们更改this指向
var Person = {
name:"lixue",
age:
}
function fn(x,y){
console.log(x+","+y);
console.log(this);
console.log(this.name);
console.log(this.age);
}
fn.call(Person,"hh",);
看,现在this就指向person了
2.apply() 方法
apply(thisScope, [arg1, arg2, arg3...]);两个参数
apply() 与call()非常相似,不同之处在于提供参数的方式,apply()使用参数数组,而不是参数列表
3.bind()方法
bind(thisScope, arg1, arg2, arg3...),bind 改变this的指向,返回的是函数
bind()创建的是一个新的函数(称为绑定函数),与被调用函数有相同的函数体,当目标函数被调用时this的值绑定到 bind()的第一个参数上
三、改变this指向的例子
var oDiv1 = document.getElementById("div1");
oDiv1.onclick = function(){
setTimeout(function(){
console.log(this); //定时器里的this指向window
},)
}
没错,就像上面所说,定时器里的this指向window,那么怎么改成指向div呢
var oDiv1 = document.getElementById("div1");
oDiv1.onclick = function(){
setTimeout(function(){
console.log(this);
}.bind(this),)
}
因为在定时器外,在绑定事件中的this肯定指向绑定事件的对象div啊,用call和apply都行
上图就是用bind改变了this指向,但改变定时器中的this指向,我们有个更好的方法
var name = "Tom";
var person = {
name:'Lucy',
age:,
say:function(){
var _this = this; //定义一个_this变量来存储this
console.log(this.name); //Lucy
setTimeout(function(){
console.log(_this.name); //Lucy
console.log(_this.age); //
},)
}
}
person.say();
定义一个_this变量来存储this值,使全局对象里面的this 指向person 的this
this指向及改变this指向的方法的更多相关文章
- 前端js中this指向及改变this指向的方法
js中this指向是一个难点,花了很长时间来整理和学习相关的知识点. 一. this this是JS中的关键字, 它始终指向了一个对象, this是一个指针; 参考博文: JavaScript函数中的 ...
- this(this的4种指向和改变this指向的方式)
this是Javascript语言的一个关键字. 随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象. 1.this指向的形式4种 a.如果是 ...
- 可以改变this指向的方法
this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike',' ...
- 改变this指向的三种方法
call.apply.bind三者为改变this指向的方法. 共同点:第一个参数都为改变this的指针.若第一参数为null/undefined,this默认指向window call(无数个参数) ...
- js中改变this指向的call、apply、bind 方法使用
前言: 由于js 中this的指向受函数运行环境的影响,指向经常改变,使得开发变得困难和模糊,所以在封装sdk,写一些复杂函数的时候经常会用到this 指向绑定,以避免出现不必要的问题,call.ap ...
- (三十七)js改变this指向的方法
最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1.改变函数内部的this指向的三种方法 ...
- 五、React事件方法(自写一个方法(函数),然后用按钮onClick触发它、自写方法改变this指向3种写法、
上接:https://www.cnblogs.com/chenxi188/p/11782349.html 项目目录: my-app/ README.md node_modules/ package.j ...
- Javasript中this指向问题和改变this指向的方法
在学习javascript中我们往往会被this的指向问题弄的头昏转向,今天我们就来学习一下this的指向问题,和改变this指向的方法. 一.this的指向问题 在学习this的指向问题之前我们需要 ...
- ES5中改变this指向的三种方法
ES5中提供了三种改变函数中this指针指向的方法,分别如下 1.call() var obj = {username:"孙悟空"}; //没有任何修饰的调用函数,函数中的this ...
随机推荐
- gzy的摄影梦
好像当身高180的摄影师啊. 记录一下素材,等自己有相机了,就一一实现. 竟然有人在看哎. 一袭红衣的女子,将手伸出窗外,开心的看这漫天大雪. 今天的晚霞,近处是蓝色,颜色逐渐变淡,一直延伸到远处.( ...
- 2017-12-20python全栈9期第五天第二节之可变 数据类型和不可变数据类型
- 010-3 Socket协议ProtocolType
ProtocolType成员 成员名称 说明 Ggp 网关到网关协议. Icmp Internet 控制消息协议. IcmpV6 IPv6 的 Internet 控制消息协议. Idp Interne ...
- MD5算法 —— C语言实现(字符串的加密)
转 https://blog.csdn.net/weixin_42167759/article/details/81209320 网上找到的实现md5函数代码,包括一个头文件md5.h和一个源文件md ...
- #0 scrapy爬虫学习中遇到的坑记录
python 基础学习中对于scrapy的使用遇到了一些问题. 首先进行的是对Amazon.cn的检索结果页进行爬取,很顺利,无碍. 下一个目标是对baidu的搜索结果进行爬取 1,反爬虫 1.1 我 ...
- git下载/上传文件提示:git did not exit cleanly
问题:git操作下载/上传文件,提示信息如下 TortoiseGit-git did not exit cleanly (exit code 1) TortoiseGit-git did not ex ...
- 一个老鸟发的公司内部整理的 Android 学习路线图
基础工具部分: 中文手册,我猜测是Maven中文手册,可是我并没有找到这样的资源,欢迎知道的朋友告诉我: Android部分有 『第三方库集合』,我没能找到资源地址: 书籍我大多是给的豆瓣链接,如果觉 ...
- IAR 关于C++几个内存的使用及释放的问题
由于之前工作中常常遇到,但是遇到的时候工作总是要求比较紧急,没有那么多时间细细寻找有效的解决办法.现在了解到了一些,记录一些. 1. string vector 都是增量在堆里,所以只要有增量都是在堆 ...
- 【转】详解web.xml中元素的加载顺序
顺序为: context-param --> listeners --> filters --> servlets(如DispatcherServlet等) 详见<https: ...
- 【easy】784. Letter Case Permutation
Examples: Input: S = "a1b2" Output: ["a1b2", "a1B2", "A1b2", ...