js中this的指向

数字踏霓人
• 阅读 784

JS中this的指向
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
在javaScript中,this是动态绑定的,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。
<mark>在绝大多数情况下,函数的调用方式决定了this的值,this指向调用函数的对象</mark>
this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值,
而不用考虑函数如何被调用的,ES2015 引入了支持this词法解析的箭头函数(它在闭合的执行上下文内设置this的值)。
2.知识剖析
由一个简单的对象,引入全局对象。
无论是否在严格模式下,在全局执行上下文中(在任何函数体外部)this 都指代全局对象。
this指向在函数定义的时候是确定不了的,只有函数被调用的时候才能够确定,实际上this的最终指向的是
            那个调用它的对象
this的常见的四种情形
1、纯粹的作为函数调用:全局函数中,this指向window
2、作为对象方法的调用:当函数被作为某个对象的方法调用时,this就是那个对象
3、闭包中的this指向的是什么?指向的是window对象
4、apply、call调用:this指向改变后的调用这个函数的对象
作为构造函数调用:this指向新对象

1、全局环境中的this
<pre>

function a(){
console.log(this);
}
a();

</pre>
这里调用了a函数,而a函数的执行环境是全局环境,这里的this也就指向了全局变量window。
严格模式 ‘use strict’下的this
<pre>

'use strict';
function a(){
this.user = "hello";
console.log(this);
console.log(this.user);
}
a();
console.log(user)

</pre>
在严格模式下,在全局环境中执行函数调用的时候
this 并不会指向 window 而是会指向 undefined。如果不用严格模式,可能你不知不觉中就定义了几个全局变量。
2.如果函数作为一个对象的属性方法,并且被调用的时候,this 就指向这个对象。
<pre>

var name = '火影';
var person = {
name: '水影',
sayName: function() {
console.log(this.name);
}
};
var sayNameWin = person.sayName;

person.sayName(); //水影
sayNameWin(); //火影 作为 window 的方法被调用的

</pre>
3.作为构造函数被调用的时候,this 代表它即将 new 出来的对象
<pre>

function Person(name) {
this.name = name;
console.log(this);
}

var person = new Person('张飒');
console.log(person.name); //张飒

</pre>
注:构造函数不使用new调用,则和普通函数一样。一般地,构造函数首字母大写
如果不加 new,表示即作为普通函数调用,指向 window
<pre>

function Person(name) {
this.name = name;
console.log(this); //window
}

Person('水影');
console.log(window.name); //水影

</pre>
4.作为 call/apply/bind 方法的调用
作为 call/apply/bind 方法被调用的时候指向传入的值
<pre>

var person = {
name: '人才'
};
function fn() {
console.log(this); //Object {name: "人才"}
console.log(this.name); //人才
}

fn.apply(person);

</pre>
3、常见问题
setTimeout、setInterval中的this是指向哪里?
     setTimeout、setInterval中的this再实际调用的时候this指向全局Window的对象
4、解决方案
javascript 高级程序设计》中写到:“超时调用的代码都是在全局执行域中执行的”。
            setTimeout/setInterval 执行的时候,this 默认指向 window 对象,除非手动改变 this 的指向。
<pre>

var name = '土影';
function Person(){
this.name = '火影';
this.sayName=function(){
console.log(this); //window
console.log(this.name); //火影
};
setTimeout(this.sayName, 10);
}
var person=new Person();

</pre>
5、编码实战
6.扩展思考
如何改变this的指向?
可以使用call或者apply的方法
<pre>

// 一个对象可以作为call和apply的第一个参数,并且this会被绑定到这个对象。
var obj = {name: 'bob'};

// 这个属性是在global对象定义的。
var name = 'jac';

function foo() {
console.log(this.name) // this的值取决于函数的调用方式
}

foo(); // 'jac'
foo.call(obj); // 'bob'
foo.apply(obj); // 'bob'

</pre>
7.参考文献
                    深入浅出的认识this

                    如何理解js中的this关键字

<h3>8、更多讨论</h3>
<! - <p> 资料链接 </ p> - >

3个问题:

1,

如何改变这种的指向?
可以使用电话或者申请的方法
2,

s etTimeout,setInterval中的这是指向哪里?
s etTimeout,setInterval中的这个再实际调用的时候这指向全局Window的对象
3,

箭头函数的这个指向哪里?
箭头函数:根据所在的环境(我再哪个环境中,这就指向谁)

点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript有函数作用域:这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域:它们只能在函数中访问。JS://codeherecann
Karen110 Karen110
3年前
一篇文章带你了解JavaScript this关键字
与其他语言相比,this关键字在JavaScript中的行为略有不同。JavaScript中,this关键字引用其所属的对象。根据使用位置,它具有不同的值。一、前言方法中,this关键字引用其所属的对象。1.this指的是全局对象在函数中。2.this引用全局对象在函数中。3.在严格模式下,this是未定义的在事件中。4.
深度学习技术开发与应用
关键点1.强化学习的发展历程2.马尔可夫决策过程3.动态规划4.无模型预测学习5.无模型控制学习6.价值函数逼近7.策略梯度方法8.深度强化学习DQN算法系列9.深度策略梯度DDPG,PPO等第一天9:0012:0014:0017:00一、强化学习概述1.强化学习介绍2.强化学习与其它机器学习的不同3.强化学习发展历史4.强化学习典
小嫌 小嫌
3年前
bind()与call()和apply()之间的区别
具体内容以及示例可参见网站:需要记住的基本规则1."this"指代一个对象2."this"指的是调用它包含的函数的对象。3.在全局上下文中,“this”指的是窗口对象,或者如果使用“严格模式”则是未定义的。varcarregistrationNumber:"GA12345",brand:"Toyota",dis
Souleigh ✨ Souleigh ✨
4年前
Javascript 常用代码优化和重构的方法
简介主要介绍以下几点:1.提炼函数2.合并重复的条件片段3.把条件分支语句提炼成函数4.合理使用循环5.提前让函数退出代替嵌套条件分支6.传递对象参数代替过长的参数列表7.少用三目运算符8.合理使用链式调用9.分解大型类10.活用位操作符11.纯函数本文会不断更新,不足之处欢迎
Stella981 Stella981
3年前
JavaScript易错知识点整理
前言本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES6的知识点。JavaScript知识点1.变量作用域vara1;functio
Stella981 Stella981
3年前
JS 中的this指向问题和call、apply、bind的区别
this的指向问题一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window。functiona(){console.log(this);//输出函数a中的this对象}functionb(){};varc{name:"call"}
Wesley13 Wesley13
3年前
C++ 什么时候调用析构函数
析构函数是在对象消亡时,自动被调用,用来释放对象占用的空间。有四种方式会调用析构函数:1.生命周期:对象生命周期结束,会调用析构函数。2.delete:调用delete,会删除指针类对象。3.包含关系:对象Dog是对象Person的成员,Person的析构函数被调用时,对象Dog的析构函数也被调用。4.
Stella981 Stella981
3年前
PythonStudy——魔法函数 Magic Methods
魔法函数python中以双下划线开始和结束的函数(不可自己定义)为魔法函数调用类实例化的对象的方法时自动调用魔法函数(感觉不需要显示调用的函数都叫)在自己定义的类中,可以实现之前的内置函数,比如下面比较元素sorted时用It函数(lt(self,other):判断self对象是否小于other对象;)
Stella981 Stella981
3年前
React(5)
绑定函数事件在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的this指向当前组件实例。run(){  alert('我是一个run方法')}<buttononClick{this.run}执行方法</button //方法
Stella981 Stella981
3年前
JavaScript之深入理解this
定义this是函数运行时自动生成的内部对象,即调用函数的那个对象。(不一定很准确的定义,但还算通俗易懂)在大多数情况下,this的值由函数调用方式决定,它不能在执行期间赋值来设置,它在每次执行下可能都有不同的值。全局执行环境(outsidefunction)在全局执行环境中,this一直
数字踏霓人
数字踏霓人
Lv1
能够慢慢培养的不是感情而是习惯
文章
2
粉丝
0
获赞
0