十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
在介绍作用域特性之前,我们先来回顾一下js的执行上下文(详细介绍:https://www.jianshu.com/p/8f19e45fd1f1)
一段
核心:this要在执行时才能确认值,定义时无法确认。
var a = {
name: 'A',
fn: function (){
console.log(this.name);
}
}
a.fn(); // this === a (即使是b.a.fn(),this也是a)
a.fn.call({name: 'B'}); // this === {name: 'B'}
var fn1 = a.fn;
fn1(); // this === window
this几种不同的运用场景
1、作为构造函数执行:(例如:new Foo(),this指向这个新对象)
2、作为对象属性执行:(this指向对象)
3、作为普通函数执行:(this指向window)
4、call()、apply()、bind():(this指向传入的第一个对象参数,bind只有一个参数)
参考:https://www.w3cschool.cn/jsnote/jsnote-this.html
call,apply、bind都属于Function.prototype的一个方法,他们的作用改变函数的调用对象,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply,bind属性。既然作为方法的属性,那它们的使用就当然是针对方法的了,这几个方法是容易混淆的。
call,apply的用法差不多,只是参数稍微不同;(apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来。)
// 以最简单window对象为例
function sum(num1, num2) {
return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,10])); //20 这两都相当于window.sum(10,10);
// 即语法:foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)
而bind的用法有一点差别。(只是传一个参数对象,然后返回一个函数给接受的变量,再另外调用执行。)
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
var OSayColor = sayColor.bind(o);
OSayColor(); //blue
详情:https://www.w3cschool.cn/xqw2e7/9m2x12y0.html
本文题目:作用域和闭包(以及this的用法)
浏览地址:http://shouzuofang.com/article/pogjcc.html