每日JavaScript - 19 （this，js内存引用）

最新推荐文章于 2023-08-31 12:59:31 发布

tcap99

最新推荐文章于 2023-08-31 12:59:31 发布

阅读量263

点赞数

分类专栏：前端 Javascript

本文链接：https://blog.csdn.net/tcap99/article/details/84637122

版权

前端同时被 2 个专栏收录

62 篇文章 0 订阅

订阅专栏

Javascript

44 篇文章 0 订阅

订阅专栏

本文深入解析JavaScript中this关键字的指向规则及引用类型的内存管理。通过具体代码示例，详细阐述了函数调用时this的确定方式，以及不同上下文对this指向的影响。同时，探讨了引用类型在内存中的存储机制，包括堆内存和栈内存的角色，以及对象属性修改时的内存变化。

摘要由CSDN通过智能技术生成

看到一道关于this的题目，挺简单的
https://juejin.im/post/5bfe8fc5e51d4514e0515b90#comment

var num = 1;
var myObject = {
    num: 2,
    add: function() {
        this.num = 3;
        (function() {
            console.log(this.num);
            this.num = 4;
        })();
        console.log(this.num);
    },
    sub: function() {
        console.log(this.num)
    }
}
myObject.add();
console.log(myObject.num);
console.log(num);
var sub = myObject.sub;
sub();

哈哈，第一次看的时候少看第一句，输出了undefined。做做看嘛，输出一下就会了。
记住两点： this是在函数调用时才确定。this的指向要看上下文（有没有被那个对象拥有，没被拥有，this指向undefined，非严格模式指向全局对象）
哈哈，this就是如此简单。

今天被一道看似简单的题难住

var a = {n: 1};
var b = a;
a.x = a = {n: 2};

console.log(a.x);
console.log(b.x);

两个输出分别是什么呢？
我觉得我会解释不清，先上文章。
https://juejin.im/post/5bf6095f6fb9a049f9123492#heading-11

var b = a;

所有的引用类型都保存在堆内存中，所以{n: 1}保存在堆中。a拥有{n: 1}的内存地址（指针？），而这句话就是b也copy了{n: 1}的内存地址，注意不是copy了a的内存地址，a和b都在栈内存中。

a.x = a = {n: 2};

这句话做了什么？
首先，.运算符优先于=运算符,优先运行a.x,使得在堆内存中的{n: 1}，变成{n: 1, x: undefined}。
然后，进行赋值运算，赋值运算是从右到左的，

a = {n: 2

这时a不再拥有原先堆内存的地址，拥有一个新的内存地址。

a.x = a

最后，a.x再copy了a的新内存地址。需要注意的是这时候a.x是第一步中的{n: 1, x: undefined}那个对象，其实就是b.x，相当于b.x = {n: 2}

我去看看作者推荐的文章再学习学习。

提示：
开发中不能用全局变量，因为JavaScript垃圾回收机制很难回收全局变量，还有全局变量很容易引发命名冲突。

更新两道this难题

/**
 * Question 1
 */

var name = 'window'

var person1 = {
  name: 'person1',
  show1: function () {
    console.log(this.name)
  },
  show2: () => console.log(this.name),
  show3: function () {
    return function () {
      console.log(this.name)
    }
  },
  show4: function () {
    return () => console.log(this.name)
  }
}
var person2 = { name: 'person2' }

// person1
person1.show1()
// peroson2
person1.show1.call(person2)

// window
person1.show2()
// window
person1.show2.call(person2)

// window
person1.show3()()
// person2
person1.show3().call(person2)
// window
person1.show3.call(person2)()

// person1
person1.show4()()
// person1
person1.show4().call(person2)
// person2
person1.show4.call(person2)()

/**
 * Question 2
 */
var name = 'window'

function Person (name) {
  this.name = name;
  this.show1 = function () {
    console.log(this.name)
  }
  this.show2 = () => console.log(this.name)
  this.show3 = function () {
    return function () {
      console.log(this.name)
    }
  }
  this.show4 = function () {
    return () => console.log(this.name)
  }
}

var personA = new Person('personA')
var personB = new Person('personB')

// personA
personA.show1()
// personB
personA.show1.call(personB)

// personA
personA.show2()
// personA
personA.show2.call(personB)

// window
personA.show3()()
// personB
personA.show3().call(personB)
// personB
personA.show3.call(personB)()

// personA
personA.show4()()
// personA
personA.show4().call(personB)
// personB
personA.show4.call(personB)()

这里我做了两遍只有部分对的，看了文章没记答案再做全队了。其中思路不是很清晰，请大家阅读
https://juejin.im/post/5c00d62df265da614c4c86f8#comment
https://juejin.im/post/59aa71d56fb9a0248d24fae3#comment
值得注意的是：(MDN原话)
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
鉴于 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。