この バグ 、vue2 のこの指摘された問題 でアロー関数を使用したため、同僚が行き詰まり、対応する props# を取得できなくなりました。 ## 。私がそれを紹介したとき、彼はそれを知りませんでした。その後、私はわざとフロントエンド コミュニケーション グループに目を向けました。今のところ、フロントエンド プログラマの少なくとも 70% はまだそれを理解していません。それを共有します。今日はあなたと一緒に thisポイント、何も学んでいないなら、大きな口を立ててください。
ポインタは、どこで定義されるかには関係なく、どのように呼び出されるか、そしてどのような形式で呼び出されるかに関係します。
(this) どのように this関数が呼び出されます (覚えておくと便利です)
this ポインティングは主に呼び方の形式によって決まります。次に、呼び出しルールを紹介します。ルールがなければ何も完成しません。この呼び出しルールを覚えておいてください。難しいことは何もありません。」
function bar() {
console.log(this) // window
}## です。 #厳密モードでは、thisconst info = {
fullName: 'ice',
getName: function() {
console.log(this.fullName)
}
}
info.getName() // 'ice'この関数は
info は info となり、値は this.fullName を通じてアクセスされます。は間違いなく Ice場合によっては、暗黙的な損失が実行され、暗黙的にバインドされた関数がバインドされたオブジェクトが失われます。つまり、デフォルト バインディングになります。デフォルト バインディングの this
値は、現在いる環境。厳密モードかどうか。const info = {
fullName: 'ice',
getName: function() {
console.log(this.fullName)
}
}
const fn = info.getName
fn() //undefined この場合、暗黙的な損失が行われ、バインドされたオブジェクトが失われることになりますが、なぜこのような問題が発生するのでしょうか？記憶に詳しい人なら簡単に理解できると思います。 getName に対応するメモリ アドレスは infoを通じて検出され、変数
fn## に割り当てられます。fnwindow です) です。 fullName 属性を取り出します。この属性は <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">//申明变量关键字必须为var
var fullName = 'panpan'
const info = {
fullName: 'ice',
getName: function() {
console.log(this.fullName)
}
}
function bar(fn) {
//fn = info.getName
fn() // panpan
}
bar(info.getName)</pre><div class="contentsignin">ログイン後にコピー</div></div>
の fn はコールバック関数
fn = info.getName 参照を指しており、これはメモリ アドレス this がグローバル window オブジェクト 」でなければならないのはなぜですか? で宣言された変数のみがグローバル windowIf let\constしかし、シナリオによっては、暗黙的な損失を望まない場合があります。どうすればよいですか? ディスプレイ バインディングを導入しましょうあなたへの、つまり固定電話です。
2.3 表示バインディング js の「すべての」関数には、いくつかの便利な機能があります。これは、そのプロトタイプ チェーンに関連しています。プロトタイプチェーン js を介して継承を偽装して実装する方法をプロトタイプに導入します。このうち call/apply/bind
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。this对象apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。var fullName = 'panpan'
const info = {
fullName: 'ice',
getName: function(age, height) {
console.log(this.fullName, age, height)
}
}
function bar(fn) {
fn.call(info, 20, 1.88) //ice 20 1.88
}
bar(info.getName)call的方法类似，只是参数列表有所不同call 参数为单个传递apply 参数为数组传递var fullName = 'panpan'
const info = {
fullName: 'ice',
getName: function(age, height) {
console.log(this.fullName, age, height)
}
}
function bar(fn) {
fn.apply(info, [20, 1.88]) //ice 20 1.88
}
bar(info.getName)bind与apply/call之间有所不同，bind传入this，则是返回一个this绑定后的函数，调用返回后的函数，就可以拿到期望的this。bind时，可以传入参数bind返回的参数也可以进行传参var fullName = 'panpan'
const info = {
fullName: 'ice',
getName: function(age, height) {
console.log(this.fullName, age, height) //ice 20 1.88
}
}
function bar(fn) {
let newFn = fn.bind(info, 20)
newFn(1.88)
}
bar(info.getName) 谈到new关键字，就不得不谈构造函数，也就是JS中的 "类"，后续原型篇章在跟大家继续探讨这个new关键字，首先要明白以下几点，new Fn()的时候发生了什么，有利于我们理解this的指向。
创建了一个空对象
将this指向所创建出来的对象
把这个对象的[[prototype]] 指向了构造函数的prototype属性
执行代码块代码
如果没有明确返回一个非空对象，那么返回的对象就是这个创建出来的对象
function Person(name, age) {
this.name = name
this.age = age
}
const p1 = new Person('ice', 20)
console.log(p1) // {name:'ice', age:20}new Person()的时候，那个this所指向的其实就是p1对象function bar() {
console.log(this) //info
}
const info = {
bar: bar
}
info.bar()widonw或者undefined，变相的可以认为隐式绑定 > 默认绑定var fullName = 'global ice'
const info = {
fullName: 'ice',
getName: function() {
console.log(this.fullName)
}
}
info.getName.call(this) //global ice
info.getName.apply(this) //global ice
info.getName.bind(this)() //global icefunction bar() {
console.log(this) //123
}
const newFn = bar.bind(123)
newFn.call(456)首先我们来说一下，为什么是和bind比较，而不能对call和apply比较，思考下面代码
const info = {
height: 1.88
}
function Person(name, age) {
this.name = name
this.age = age
}
const p1 = new Person.call('ice', 20)
//报错: Uncaught TypeError: Person.call is not a constructornew绑定和bind绑定比较
const info = {
height: 1.88
}
function Person(name, age) {
this.name = name
this.age = age
}
const hasBindPerson = Person.bind(info)
const p1 = new hasBindPerson('ice', 20)
console.log(info) //{height: 1.88}bind对Person进行了一次劫持，硬绑定了this为info对象new 返回的固定this的函数new关键字 > bind > apply/call > 隐式绑定 > 默认绑定
首先箭头函数是ES6新增的语法
const foo = () => {}var fullName = 'global ice'
const info = {
fullName: 'ice',
getName: () => {
console.log(this.fullName)
}
}
info.getName() //global iceice
ES6的新特性，箭头函数不绑定this，它的this是上一层作用域，上一层作用域为window
global ice
getObjName通过this拿到info中的fullName (值为ice的fullName)const info = {
fullName: 'ice',
getName: function() {
let _this = this
return {
fullName: 'panpan',
getObjName: function() {
console.log(this) // obj
console.log(_this.fullName)
}
}
}
}
const obj = info.getName()
obj.getObjName()当我调用 info.getName() 返回了一个新对象
当我调用返回对象的getObjName方法时，我想拿到最外层的fullName，我通过，getObjName的this访问，拿到的this却是obj，不是我想要的结果
我需要在调用info.getName() 把this保存下来，info.getName() 是通过隐式调用，所以它内部的this就是info对象
getObjName是obj对象，因为也是隐式绑定，this必定是obj对象，绕了一大圈我只是想拿到上层作用域的this而已，恰好箭头函数解决了这一问题
const info = {
fullName: 'ice',
getName: function() {
return {
fullName: 'panpan',
getObjName: () => {
console.log(this.fullName)
}
}
}
}
const obj = info.getName()
obj.getObjName()默认绑定
隐式绑定
显示绑定 apply/call/bind(也称硬绑定)
new绑定
new绑定
bind
call/apply
隐式绑定
默认绑定
当一切都看起来不起作用的时候，我就会像个石匠一样去敲打石头，可能敲100次，石头没有任何反应，但是101次，石头可能就会裂为两半 我知道并不是第101次起了作用，而是前面积累所致。
大家有疑惑可以在评论区留言 第一时间为大家解答。
（学习视频分享：web前端开发）
![Meituan APPを模倣した実践的な開発 [フロントエンドプログラマー必須のJavaScriptプロジェクト]](https://img.php.cn/upload/course/000/000/068/6242bebc05ca9210.png)
![JavaScript の基本構文 [dom|bom|es6 新しい構文|jQuery|データ視覚化 echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
