ES63函数

函数定义的方式

// 自定义函数
function f() {}
// 函数表达式（匿名函数）
let fun = function() {};
// 利用 new Function('参数1','参数2','函数体')
let func = new Function('console.log("123")');
func();
// 所有函数都是Function的实例（对象）
console.dir(func);
console.log(func instanceof Function);

函数的调用方式

// 函数的调用方式
// 1 普通函数
function f() {
  console.log("1");
}
f();
f.call();
// 2 对象的方法
let o = {
  sayHello: function() {
    console.log("1");
  }
};
o.sayHello();
// 3 构造函数
function Star() {}
new Star();
// 4 绑定事件函数
document.querySelector("div").onclick = function() {
  console.log("1");
};
// 5 定时器函数
// setInterval(function() {}, 100);
// 6 立即执行函数
(function() {
  console.log("1");
})();

This的指向

// 1 普通函数this指向window
function f() {
  console.log("普通函数的this", this);
}
// window.f();

// 2 对象的方法 this指向的是对象o
let o = {
  sayHello: function() {
    console.log("对象的this", this);
  }
};
o.sayHello();

// 3 构造函数 this指向实例对象p  原型对象里的this也是指向p这个实例对象
function Star() {}
Star.prototype.sing = function() {};
let p = new Star();

// 4 绑定事件函数  this指向的是函数的调用者
document.querySelector("div").onclick = function() {
  console.log("指向的是", this);
};

// 5 定时器函数  this指向window
// setInterval(function() {}, 100);

// 6 立即执行函数 this指向window
(function() {
  console.log("立即执行函数this，", this);
})();

改变this指向

Call

// call
let o = {
  name: "jack"
};
function f(a, b) {
  // 默认指向的是window
  console.log(this);
  console.log(a + b);
}
// 将this指向对象o
f.call(o, 1, 2);
function Father(username, age) {
  // 里面的this指向的是父构造函数的对象实例
  this.username = username;
  this.age = age;
}
Father.prototype.money = function() {
  console.log("money");
};
function Son(username, age, score) {
  // 里面的this指向的是子构造函数的对象实例，使用call之后，父构造函数里面的this变成了子函数里的this
  Father.call(this, username, age);
}
let p = new Son("jack", 19);
console.log(p);

Apply

// apply 调用一个函数，也可以改变this指向
let o = {
  name: "jack"
};
function f(arr) {
  // 默认指向的是window
  console.log(this);
  console.log(arr); // red
}
// 将this指向对象o，传递参数但是它的参数必须是数组
f.apply(o, ["red"]);
// apply 应用
let max = Math.max.apply(Math, [1, 5, 7, 9, 33]);
console.log(max);

Bind

<button>点击</button>

// bind 不会调用函数，但可以改变this指向
let o = {
  name: "jack"
};
function f(a, b) {
  console.log(this);
  console.log(a + b);
}
// this指向了o，返回的是原函数改变this之后产生的新函数
let func = f.bind(o, 1, 2);
func();
// 如果有的函数不需要立即调用，但又想改变函数内部的this指向，此时用bind
let btn = document.querySelector("button");
btn.onclick = function() {
  this.disabled = true;
  // setTimeout(function() {
  //   // 这里的this是window对象，所以指向的不是btn
  //   this.disabled = false;
  // }, 2000);
  setTimeout(
    function() {
      this.disabled = false;
    }.bind(this), // 这个this指向的是btn对象
    2000
  );
};

<button>点击</button>
<button>点击</button>
<button>点击</button>
let btn = document.querySelectorAll("button");
for (let i = 0; i < btn.length; i++) {
  btn[i].onclick = function() {
    this.disabled = true;
    setTimeout(
      function() {
        this.disabled = false;
      }.bind(this),
      2000
    );
  };
}

ronle 发布了3 篇原创文章 · 获赞 0 · 访问量 110 私信关注

相关推荐