this 指向
1.在浏览器中,全局范围内this 指向window对象
2.在函数中,this永远指向最后调用他的那个对象
3.构造函数中,this指向new出来的那个新的对象
4.call、apply、bind中的this被强绑定在指定的那个对象上
5.箭头函数中this比较特殊,箭头函数this为父作用域的this,不是调用时的this,前四种方式都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了
6.call、apply、bind都是js给函数内置的一些API,调用他们可以为函数指定this的指向,同时也可以传参
改变函数内部 this 指向
1.call方法
call() 方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的 this 指向
应用场景: 经常用做继承
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a+b)
};
fn(1,2) // 此时的this指向的是window 运行结果为3
fn.call(o,1,2) // 此时的this指向的是对象o,参数使用逗号隔开,运行结果为3
2.apply方法
apply() 方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的 this 指向
应用场景: 经常跟数组有关系
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a+b)
};
fn() // 此时的this指向的是window 运行结果为3
fn.apply(o,[1,2]) // 此时的this指向的是对象o,参数使用数组传递 运行结果为3
3.bind方法
bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数
应用场景: 不调用函数,但是还想改变this指向
var o = {
name: 'andy'
};
function fn(a, b) {
console.log(this);
console.log(a + b);
};
var f = fn.bind(o, 1, 2); // 此处的f是bind返回的新函数
f(); // 调用新函数 this指向的是对象o 参数使用逗号隔开
call、apply、bind三者的区别
共同点: 都可以改变this指向
不同点:
-
call 和 apply 会调用函数,并且改变函数内部this指向
-
call 和 apply 传递的参数不一样,call 传递参数使用逗号隔开,apply 使用数组传递
-
bind 不会调用函数,但可以改变函数内部this指向
应用场景:
call
经常用做继承
apply
经常跟数组有关系,比如借助于数学对象实现数组最大值最小值
bind
不调用函数,但是还想改变this指向,比如改变定时器内部的this指向
函数的定义和调用
函数的定义方式
方式1:函数声明方式 function 关键字 (命名函数)
function fn(){}
方式2:函数表达式(匿名函数)
var fn = function(){}
方式3:new Function()
var f = new Function('a', 'b', 'console.log(a + b)');
f(1, 2);
var fn = new Function('参数1','参数2'..., '函数体')
注意:
Function 里面参数都必须是字符串格式
第三种方式执行效率低,也不方便书写,因此较少使用
所有函数都是 Function 的实例(对象),函数也属于对象
函数的调用
1.普通函数
function fn() {
console.log('人生的巅峰');
}
fn();
2.对象的方法
var o = {
sayHi: function() {
console.log('人生的巅峰');
}
}
o.sayHi();
3.构造函数
function Star() {};
new Star();
4.绑定事件函数
btn.onclick = function() {}; // 点击了按钮就可以调用这个函数
5.定时器函数
setInterval(function() {}, 1000); //这个函数是定时器自动1秒钟调用一次
6.立即执行函数(自调用函数)
(function() {
console.log('人生的巅峰');
})();