JS高级笔记4

时间：2019/11/1

3.函数进阶

1).函数的定义和调用
1.函数定义

// 1.自定义函数（命名函数）
function fn() {};

// 2.函数表达式（匿名函数）
var fn = function() {};

// 3.利用 new Function('参数1', '参数2', '函数体');
// 所有的函数都是Function的实例对象，也属于对象

函数定义.jpg

2.函数调用

// 1.普通函数
function say() {};
say(); 或 say.call();

// 2.对象的方法
var obj = {
  say: function() {}
};
obj.say();

// 3.构造函数
function Star() {}
Star.prototype.sing = function() {};
new Star();

// 4.绑定事件函数
btn.onclick = function() {};

// 5.定时器函数
setInterval(function() {}, 1000);

// 6.立即执行函数
(function() {})()

函数调用.jpg

3.函数内this的指向

// 1.普通函数this指向window
function say() {
  console.log(this); // window
};
window.say();

// 2.对象的方法this指向的是对象
var obj = {
  say: function() {
    console.log(this); // obj
  }
};
obj.say();

// 3.构造函数与原型对象this指向所创建的实例对象
function Star() {}
Star.prototype.sing = function() {};
var star = new Star();

// 4.绑定事件函数this指向函数的调用者
btn.onclick = function() {};

// 5.定时器函数this指向window
setInterval(function() {
  console.log(this); // window
}, 1000);

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

this指向.jpg

4.改变函数内this指向

// 1.call(thisArg, arg1, arg2, ......)
fn.call(); // 调用函数

fn.call(obj); // 改变函数内的this指向

function Father(age, name) {
  this.age = age;
  this.name = name;
}
function Son(age, name) {
  Father.call(this, age, name); // 实现属性继承
}

// 2.apply(thisArg, [argsArray])
fn.apply(); // 调用函数

fn.apply(obj); // 改变函数内的this指向

Math.max.apply(Math, arr); // 借助数学内置对象求最大值

// 3.bind(thisArg, arg1, arg2, ......)
// 不立即调用函数，返回由指定的this值和初始化参数改造的原函数拷贝（新函数），不修改原函数
var f = fn.bind(obj);

// 应用：需要改变函数内部this指向，但不需要立即执行函数
1.
btn.onclick = function() {
  this.disabled = true;
  setTimeout(function() {
    this.disabled = false;
  }.bind(this), 3000) // 将btn的this绑定到定时器函数中
}

2.
// 面向对象tab栏案例中，利用bind指向原来的事件绑定对象，但在参数中传入指向实例对象的this。

总结.jpg

5.严格模式(消除语法不严谨、不合理之处，减少怪异行为，为下个版本做铺垫)

// 为整个脚本（script标签）开启严格模式


// 为某个函数单独开启严格模式

严格模式下的变化：
1).变量必须先声明，再使用；
2).严禁删除已经声明的变量，如delete 变量；
3).全局作用域下函数中的this为undefined（定时器函数中this仍指向window）；
4).函数内的参数不允许重名；
5).不允许在非函数代码块内声明函数。