JavaScript-this

分享

最近又在this的指向中迷惑了，虽然之前学过一次，丝毫不影响再次掉坑，这次又捋了一遍，加深影响！

其实在javascript中this的指向主要有四种

1. 默认绑定（全局对象 严格模式下为undefined）
2. 隐式绑定（谁调用this指向谁）
3. 显示绑定（call bind apply）
4. new绑定

！ 而在箭头函数里面，这四种都不适合，因为ES6规定箭头函数是没有this的，所以它只能继承，继承外层作用域中的this，也就是要看箭头函数所定义使用的地方(宿主对象)。

网上找了好多this指向的资料，个人觉得这两个总结得很好，大家可以看一下，结合两篇文章，相信大家对this得指向问题会更加清晰。

js 中的this，默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解_toforu.com-CSDN博客

①this指向四种：默认，隐式，显示call apply bind，new构造函数②优先级③new构造函数有无return④new做了什么⑤严格模式指向_lazylYYY的博客-CSDN博客

下面是阮一峰老师讲得this原理，大家也可以看一下！

JavaScript 的 this 原理 - 阮一峰的网络日志 (ruanyifeng.com)

Node中的this和浏览器中的this的区别

大家注意，虽然node和浏览器都是js的运行环境，但node中this和浏览器中的this还是稍有不同的

浏览器中的全局对象是window，node的全局对象是global

浏览器最外层的的this是windows,而node中最外层的this并不是全局对象global，而是module.export

//在node环境下
console.log(this==global)    //false
console.log(this==module.exports)   //true
this.a=1;
console.log(module.exports.a)  //1
b=2;  //不用var声明的变量 默认作为全局对象的属性

module.export是es6实现模块化的新特性，大家有兴趣可以了解一下。

vue中的this

在vue中的this，其实在vue的设计转化下，this一般指向vue实例

1. 在Vue所有的生命周期钩子方法(created,mounted等等)和普通方法（method里面定义），this指向调用它的vue实例
2. 其他情况可以参考js的this指向

作用域和原型的区别

当访问某个变量是，就是要通过作用域链去查找了，而访问某个对象的属性时，这个时候就时要通过原型链去找了了。

这其实也是有关变量和属性的区别，变量是属于作用域的范畴，而属性其实应该是属于原型的范畴

当我们定义一个变量是，比如 var a=1；其实a不是this里面的属性，a只是一个变量。

变量和属性一个很大的区别就是，属性可以删除，而变量不可以

var a=1;
this.b=2;
delete a;  //false
delete this.b ;//true