{"componentChunkName":"component---src-templates-blog-post-js","path":"/learn-about-the-problem-of-this-point/","result":{"data":{"markdownRemark":{"html":"
var bar = {\n    myName:\"time.geekbang.com\",\n    printName: function () {\n        console.log(myName)\n    }    \n}\nfunction foo() {\n    let myName = \"极客时间\"\n    return bar.printName\n}\nlet myName = \"极客邦\"\nlet _printName = foo()\n_printName()\nbar.printName()
\n

在 printName 函数里面使用的变量 myName 是属于全局作用域下面的，所以最终打印出来的值都是“极客邦”。这是因为 JavaScript 语言的作用域链是由词法作用域决定的，而词法作用域是由代码结构来确定的。

\n

在对象内部的方法中使用对象内部的属性是一个非常普遍的需求。但是 JavaScript 的作用域机制并不支持这一点，基于这个需求，JavaScript 又搞出来另外一套 this 机制。

\n

\"\"

\n

arrow function的this指向

\n

箭头函数因为其内部 this 的值无法被改变，它与 创建 箭头函数时上下文的this指向相同

\n
const fun = () => {\n  console.log(this);\n};\nfun();\n\n// Window {window: Window, self: Window, document: document, name: \"\", location: Location, …}
\n

new 关键字

\n

使用 new 关键字调用函数时，函数中的 this 指向为 JS 创建的新对象

\n
function func(){\n    console.log(this);\n    this.name = 'news';\n    console.log(this);\n};\nnew func();\n\n// func {}\n// func {name: 'news'}
\n

bind方法

\n

使用 bind 方法可将函数绑定到其外部的 this

\n

注意

\n\n
function func() {\n    console.log(this);\n}\n\nlet o = {\n    name: 'bind'\n};\n\nfunc.bind(o)();\n\n// { name: 'bind' }
\n

apply和call方法

\n

使用 apply 和 call 方法可将this绑定到传入函数的第一个参数。两个方法区别在于通过 apply 调用时实参是放到数组中的，而通过 call 调用时实参是逗号分隔的。

\n
function func() {\n    console.log(this,a);\n}\n\nlet o = {\n    name: 'bind'\n};\n\nfunc.call(o,5, 6, 2, 3, 7);\nfunc.apply(o,[5, 6, 2, 3, 7]);\n\n// {name: \"bind\"} Arguments(5) [5, 6, 2, 3, 7, callee: ƒ, Symbol(Symbol.iterator): ƒ]\n// {name: \"bind\"} Arguments(5) [5, 6, 2, 3, 7, callee: ƒ, Symbol(Symbol.iterator): ƒ]
\n

函数作为对象的成员变量被调用

\n

函数作为对象的成员变量被调用时，this的指向为调用函数的对象

\n
let obj = {\n    name: 'obj',\n    func: function (){\n        console.log(this)\n    }\n};\n\n\nobj.func();\n// {name: \"obj\", func: ƒ}
\n

当函数没有作为方法被调用，而是被赋值给另一个变量时，则根据那个变量来判断this指向

\n
let obj = {\n    name: 'obj',\n    func: function (){\n        console.log(this)\n    }\n};\n\nlet func = obj.func;\nfunc();\n// Window {window: Window, self: Window, document: document, name: \"\", location: Location, …}
\n

浏览器和node环境下

\n

在浏览器和node环境下全局this的指向会有所不同

\n\n

this 的设计缺陷以及应对方案

\n\n
var myObj = {\n  name : \"极客时间\", \n  showThis: function(){\n    console.log(this)\n    function bar(){console.log(this)}\n    bar()\n  }\n}\nmyObj.showThis()
\n\n\n","timeToRead":3,"frontmatter":{"title":"一文搞懂this指向问题","date":"January 02, 2021","spoiler":null},"fields":{"slug":"/learn-about-the-problem-of-this-point/"}}},"pageContext":{"slug":"/learn-about-the-problem-of-this-point/","previous":{"fields":{"slug":"/classic-topic-what-happened-from-URL-input-to-page-rendering/index2/"},"frontmatter":{"title":"经典题目：从输入URL到页面呈现发生了什么"}},"next":{"fields":{"slug":"/js-implicit-conversion/"},"frontmatter":{"title":"js隐式转换"}}}},"staticQueryHashes":["3649515864","63159454"]}