函数

2025年03月19日

柏拉文

越努力，越幸运

一、函数参数特性

---

let a = [1,2,3];
let b = 1;

function foo(m,n){
    m = [4,5,6];
    m[1] = 100;
    n = 2;
}

foo(a,b);

console.log(a); // [1,2,3]
console.log(b); // 1

结果: 对于函数参数而言,如果参数是引用类型,对这个参数类型进行 push、pop、sort 等操作会修改 a 数组的。如果直接改变这个参数的引用地址,那么是不会影响原来参数的。那对于参数是基础类型的而言,更不会影响原来的值

二、this指向问题

---

var x = 2;
var y = {
  x: 3,
  z: (function (x) {
    this.x *= x;
    return function (n) {
      this.x *= n;
      x += 3;
      console.log(x);
    }
  })(x),
}
var m = y.z;
m(4);
y.z(5); 
console.log(x, y.z);

结果:

• 浏览器环境

  5
  8
  16 ƒ (n) {
            this.x *= n;
            x += 3;
            console.log(x);
          }

• Node 环境

  5
  8
  2 [Function (anonymous)]

解释:

• 浏览器环境:

  1. { z: (function(){ console.log(this)})()} 这类情况属于函数自调用, this 指向 window

  2. var m = y.z; m() 这类情况属于函数自调用, this 指向 window

• Node 环境:

  1. { z: (function(){ console.log(this)})()} 这类情况属于函数自调用, this 指向 global

  2. var m = y.z; m() 这类情况属于函数自调用, this 指向 global

三、普通函数this

---

const obj = {
  a: function() {
    console.log(this);
  },
  b: "obj 对象属性 b",
};

const b = obj.a;
b(); // b 函数自调用, this 指向 window
obj.a(); // obj 调用 a 函数, this 指向 obj

四、箭头函数this

---

const obj = {
  a: () => {
    console.log(this);
  },
  b: "obj 对象属性 b",
};

const b = obj.a;
b();  // 箭头函数 this 为上层作用域, 由于对象不是作用域, 因此 this 指向全局 windows
obj.a(); // 箭头函数 this 为上层作用域, 由于对象不是作用域, 因此 this 指向全局 windows

五、函数自调用

---

const obj = {
  x: (function () {
    console.log(this); // 函数自调用, this 指向全局 windows
    return function () {
      console.log(this);
    };
  })(),
};
obj.x(); // obj 调用函数, this 指向 obj