问答

关于JS对象及类内部this指向问题

作者:admin 2021-06-16 我要评论

var obj = { a:4, b:this.a+1, f: function(){ console.log(this.a) //4 console.log(this) //{ a: 4, b: NaN, f: [Function: f] } console.log(this.b) //NaN c...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
var obj = {
  a:4,
  b:this.a+1,
  f: function(){
    console.log(this.a)   //4
    console.log(this)     //{ a: 4, b: NaN, f: [Function: f] }
    console.log(this.b)   //NaN
    console.log(a)        //a is not defined
  }
}

为什么在对象内部定义的函数中不使用this就取不到对象内部的属性呢,它无法根据作用域链取得a的值吗?为什么对象内部的this有时指向obj,有时指向window?能具体讲讲四个结果出现的原因吗?谢谢大神

###

我猜你的函数是这样调用的:

obj.f();
那么,函数调用时候,它前面有个【点】,一般情况下,点前面是谁,被调用的这个函数里面的this就是谁。

好啦,这里【点】前面是obj,调用函数时候,就替换一下吧
obj.fn()
=> this:obj
=> console.log(this.a) :console.log(obj.a) 找到obj上有属性a,输出:4
=> console.log(this) : console.log(obj); 输出的就是obj这个对象
=> console.log(this.b) : console.log(obj.b); 输出的是obj上的属性b的值
=> console.log(a); 根据作用域链查找:先找自己作用域下的变量a,没找到;那就去上级作用域查找,一直找到全局作用域下,都没有找到变量a:那么会报错 a is not defined

这里面 obj.b 的值是NaN ,因为给他赋值是 this.a + 1 ,要找到此处的this:全局window
好啦,替换一下吧,this.a=>window.a=>在window对象上没有找到a这个属性=>undefined
好啦,计算一下吧 undefined+1 => NaN


可以参考这个:https://segmentfault.com/a/11...

###

新人必须搞懂的问题!!下面是我的笔记 ... 如果还是不懂赶快去查

作用域:
1.全局作用域
每个JS文件就是一个全局的作用域,它有且只有一个

2.局部作用域
每个独立的函数就是:局部作用域,平级的局部作用域不可相互访问

3.词法作用域
在函数内部可以访问的上级的作用域就是:词法作用域


闭包:
闭包是有权访问另一个函数作用域中变量的函数,举个栗子
function robot() {
    var name = '小仙女' 
    return function() { console.log(`我是${name},喵 ~`)}
}
var kitty = robot()
注意!突出的是内部函数(匿名函数)能够访问外部函数中的变量


this:
在 JavaScript 中的 this 总是指向调用它所在的的对象,并且 this 是在函数运行时自动生成的内部对象,因此只能在函数内部使用

有以下几个栗子:
1.全局的函数调用的时候,this 指向 window 对象,或者说函数定义时所在的作用域
var name = "global this";
function globalTest() {
    this.name = "rename global this"
    console.log(this.name);
}
globalTest();             // rename global this
console.log(name);  // rename global this


2.如果函数作为对象的方法调用,this指向的是这个上级对象,即调用方法的对象
function showName() { console.log(this.name); }
var obj = {};
obj.name = "ooo";
obj.show = showName;
obj.show(); //ooo


3.构造函数中的this指向新创建的对象本身
function showName() { this.name = "showName function"; }
var obj = new showName();
console.log(obj.name); //showName function
###

1、当前this指向obj不是window
2、作用域,a,b,f是相互独立的,三者没有任何关系,作用域链是怎么找的你回忆一下
3、你这段代码的所有this都是指向obj,(具体情况要具体分析)

var obj = {
  a:4,
  b:this.a+1,
  f: function(){
    console.log(this.a)   //4
    console.log(this)     //{ a: 4, b: NaN, f: [Function: f] }
    console.log(this.b)   //NaN(keyVALU不支持运算)
    console.log(a)        //a is not defined(a在F里并没有定义,所以defined)
  }
}
###

建议仔细看下js中this指向问题https://bingxl.cn/js中的this.html

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 关于JS对象及类内部this指向问题

    关于JS对象及类内部this指向问题

  • npm script 顺序执行多条命令,执行完

    npm script 顺序执行多条命令,执行完

  • 从左开始,去除掉非数字和0.遇到第一个

    从左开始,去除掉非数字和0.遇到第一个

  • 已知 vue 组件中没有写 name ,  如何在

    已知 vue 组件中没有写 name , 如何在

腾讯云代理商
海外云服务器