文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. function VS method
    2. 2.2. function VS arrow function
    3. 2.3. 关于Prototype与this(updated on 12/12/2017)
  3. 3. this tricks code fregments
  4. 4. Reference

Defined

重新理解一遍this
自己以前看书写的笔记写的一塌糊涂

Main()

1
自己做了一张简单的图.

function VS method

判断function和method的根本区别: 是否依赖于对象

function VS arrow function

function

在函数调用中,每个新定义的函数都有其自己的this值,上下文执行环境是全局对象||undefined(strict mode)
this指向会由内而外寻找, 而function会内建一个context, this会指向直接调用对象(最外层则调用了window/undefined)

这边提一个非常容易犯错的点:

1
2
3
4
5
6
7
8
9
10
let Obj = {
func: function() {
console.log(this === Obj);
return function() {
console.log(window === this);
}
}
}
Obj.func()();
// true -> true

即使外部函数func拥有上下文, 他也无法影响到函数调用中的this上下文
可以理解为只是赋予了第一层的this指代而已.

arrow function

箭头函数并不创建它自身执行的上下文,使得this取决于它在定义时的外部函数,即不存在层级this继承关系.

关于bind(),call()等方法就不写了.

关于Prototype与this(updated on 12/12/2017)

body.style.backgound.substr(this.length)
除了兴起的class关键字, 其他基本都是function作构造, 所以这个很简单.
substr是String.prototype继承下来的, 有点类似于以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function String() {
length: 1,
prototype: {
substring: function() {
// ...
},
substr: function (str) {
// ...
return newStr;
},
// ...
},
fromCharCode: function(x) {
// ...
},
}
// string类拥有prototype属性, 也就是如下操作
body.style.background = new String();

background属于String类, 自然继承了他的prototype, 所以这么看来的话substr()是一个返回过来的独立函数(含有作用域), 参考前面的this tricks.所以里面如果写this的话返回的是window对象,严格模式则为undefined

拓展: 代码中含有构造模式, 属性会跟着作用域向上递归寻找

this tricks code fregments

codes

Reference

Gentle explanation of ‘this’ keyword in JavaScript
es6-code-fragment
Arrow function | MDN
Constructor vs prototype
object-vs-class-vs-function | stackoverflow

文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. function VS method
    2. 2.2. function VS arrow function
    3. 2.3. 关于Prototype与this(updated on 12/12/2017)
  3. 3. this tricks code fregments
  4. 4. Reference