大家好，我是IT修真院成都分院第一期的学员常开洋，一枚正直纯洁善良的web前端程序员
今天给大家分享一下，修真院官网JS（职业）任务，
深度思考中的知识点——JS中this的指向
大家好，我是IT修真院成都分院第一期的学员常开洋，一枚正直纯洁善良的web前端程序员
1.背景介绍
this是什么？
this最开始起源于C#,当做右指针来用的只能在class,struct, 和union类型中的非静态成员函数/函数模版class指针访问， 指向被调成员所属的对象。静态成员中无法使用this指针。在js中，同样也是关键字，它代表函数运行时， 自动生成的一个函数内部对象，只能在函数内部使用
2.知识剖析
this主要有4方面的应用
1.默认绑定到全局变量
function demo1(){
console.log(this.c);
}
var c=2;
demo1();//2
2.隐式绑定(也称隐式调用)是指函数调用的时候属于某个对象，比如说
function demo2(){
console.log(this.a);
}
var obj={
a:5,
demo2:demo2
}
var a=15;
obj.demo2();//5
如果在这过程中出现带有this的函数被引用，可能会是全局变量
function demo3(){
console.log(this.a);
}
var obj={
a:5,
demo:demo3
}
var b=obj.demo;//函数引用传递
var a="abc";
b();//abc
3.显示绑定 学过bind()\apply()\call()函数的都应该知道，它接收的第一个参数就是将上下文的对象赋给this,看这个demo
function demo4(){
console.log(this.a);
}
var obj={
a:2
}
demo4.call(obj);//2
如果我们传递的第一个值是简单值的话，那么后台会自动转化为对应的封装对象，如果传递为null,那么结果就默认绑定到全局变量
function demo5(){
console.log(this.a);
}
var obj={
a:10
}
var a=2;
demo5.call(null);//2
4.new新对象绑定 如果是一个构造函数，则需要使用new来调用，那么绑定的将是新创建的对象。
function demo5(a){
this.a=a;
}
var obj=new demo5(2);
var a=10;
console.log(obj.a);//2
3.常见问题
关于很多人对于this使用的误解
相信有些人在其他语言中接触过this,会将this误解为引用function本身，下面我举个例子看看到底是不是这样
function demo6(num){
this.count++;
}
demo6.count=0;
for(var i=0;i<10;i++){
if(i>5){
demo6(i);
}
}
console.log(demo6.count);//结果是0，为什么不是4？
4.解决方案
其实在上面这个demo6中的this指的是一个全局对象，所以this.count并没有定义，更别说赋值了，如果这时候要打印this.count的话，只能为NaN了。 但是如果给count定义并赋值为0，则this.count最终结果为4；
function demo6(num){
this.count++;
console.log(this.count);//1,2,3,4
}
demo6.count=0;var count=0;
for(var i=0;i<10;i++){
if(i>5){
demo6(i);
}
}
console.log(demo6.count);
5.编码实战
6.扩展思考
说了那么多this方面的知识，那么this到底有哪方面的应用？
随着代码的增加，函数嵌套、各级调用等变得越来越复杂，那么传递一个对象的引用将变得越来越不明智，它会把你的代码弄得非常乱，甚至你自己都无法理解清楚。而this机制提供了一个更加优雅而灵便的方案，传递一个隐式的对象引用让代码变得更加简洁和复用。
7.参考文献
8.更多讨论
如果this应用在严格模式(use strict)中，上面提到的this指向哪些不能使用？
如果在严格模式的情况下执行纯粹的函数调用，那么这里的的 `this` 并不会指向全局，而是 `undefined`，这样的做法是为了消除 js 中一些不严谨的行为
'use strict';
function test() {
console.log(this.a);
};
var a=2;
小课堂视频链接：https://v.qq.com/x/page/m0540rtxyl4.html
下期不见不散~
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
test();//严格模式下会报错，正常模式下为2
网友评论