- this指向问题
1.1 认识词法作用域
其实我们js中的作用域就是词法作用域,我们会发现词法作用域最重要的特征是发生函数定义时确定的,
动态作用域呢是在函数运行时确定的形式,而不是函数定义时确定的形式
function foo(){
console.log(a);
}
function bar(){
var a = 3;
foo();
}
bar();
var a = 2;
如果js具有动态作用域那么这里应该打印3,但是不好意思告诉你们,js只有词法作用域,但是js的函数内部有一个在某种程度上和动态作用域很像的,那就是this
主要区别是
词法作用域是在函数定义时确定的
动态作用域是在函数运行时确定的,this也是这样
词法作用域关心的是函数在何处定义,动态作用域关注函数在何处被调用
既然动态作用域和this都只关心在什么位置被调用，那么我们就不得不提的调用栈，调用位置
1.2 理解调用栈
调用位置就是函数被调用的位置，调用栈是是为了能够到达当前执行位置所调用的所有函数
调用位置就在当前调用栈执行的函数的前一个调用栈
function baz(){
// 当前调用栈 是 baz
// 因此调用位置是在全局
console.log("baz");
bar(); // bar的调用位置
}
function bar(){
// 当前调用栈 是 baz -- bar
// 因此调用位置是baz
console.log("bar");
foo(); // foo的调用位置
}
function foo(){
// 当前调用栈 是 baz -- bar -- foo
// 因此调用位置是bar中
console.log("foo");
}
baz() // baz的调用位置
在调用栈中分析调用位置,因为他决定this的绑定
1.3 this 指向问题
this关键字是JS中最复杂的机制,它是一个很特别的关键字,被自动定义在所有函数的作用域中.
function foo(){
console.log(this)
}
foo();
this指向的是一个对象,我们把this指向的对象叫做函数执行的上下文对象
当函数被调用的时候，this指向会发生改变,指向调用函数的对象
在函数预编译阶段，会生成AO对象，程序还会默认把this作为AO对象的一个属性名，默认属性值是window
2.this绑定的规则
2.1 默认绑定
就是直接使用不带任何修饰的函数引用进行的调用,就是默认绑定,无法应用其他规则
function fn(){
console.log(this);
}
fn();
// 改变
function fn(){
console.log(this.a);
}
var a = 2;
fn();
2.2 隐式绑定
考虑函数调用位置是否有上下文对象,或者说是否被某个函数拥有或包含
示例:
function fn(){
console.log(this);
}
var obj = {
a : 33,
fn:fn
}
obj.fn(); // obj
对象引用链只有上一层或者说最后一层在调用的位置中起作用
function foo(){
console.log(this.a);
}
var obj2 = {
a: 42,
foo: foo
}
var obj1 = {
a: 22,
obj2: obj2
}
obj1.obj2.foo(); // 42
隐式绑定的函数会丢失绑定对象
function foo(){
console.log(this.a);
}
var obj = {
a : 20,
foo: foo
}
var a = 33;
var bar = obj.foo;
bar(); //33
// 此时赋值的知识函数的引用,bar则是一个不带任何修饰的函数调用,因此应用了默认绑定
测试
var name = "wuwei";
function showName(){
console.log(this.name);
}
var person1 = {
name: "old",
sayName:showName
}
var person2 = {
name: "xiaoming",
sayName: function(){
var fun = person1.sayName;
fun();
}
}
person1.sayName(); // old 隐式绑定 //person1.sayName()===shawName()
person2.sayName(); // wuwei
2.3 显示绑定
我们发现隐式绑定时,必须在一个对象内部包含一个指向函数的属性.并通过这个属性间接的应用函数.从而把this隐式的绑定到这个对象上.
如果我们不想在函数内部包含函数的引用呢.我们就只能用接下来要学习的方法,显示的绑定了
2.3.1 call和applay方法
call && apply方法,
作用.都是在函数执行时,修改this的指向
call 和 apply方法由两层意思
- 函数执行
- 在函数执行的时候修改函数内部的this指向
这两个方法存在于函数的原型上,至于是原型 ,咱们以后会学,你只要知道函数可以调用这两个方法就行了
使用
function foo(){
console.log(this.a)
}
var obj = {
a: 20
}
foo.call(obj);
这里就是通过call这个方法在foo函数调用的时候将函数内部的this绑定到了obj上
如果我传入一个数字,字符串 布尔值怎么办
function foo(){
console.log(this.a)
}
var obj = {
a: 20
}
foo.call(true);
// 为什么是undefined 而不报错呢
这是包装类,这里第一参数必须是对象,如果不是对象,会将其转为包装对象,转不了就是window
call && apply 方法的区别
使用方法
fn.call(obj,attr1,attr2,attr3,..);
fn.applay(obj,[attr1,attr2,attr3,..])
这两个方法传参的方式不同，apply只能传数组
示例:
function add(c,d){
return this.a + this.b + c + d;
}
var s = {a:1,b:2};
console.log(add.call(s,3,4));
console.log(add.apply(s,[5,6]));
上面程序的输出结果是什么？
2.3.2硬绑定
function foo(){
console.log(this.a);
}
var obj = {
a: 35
}
var bar = function(){
foo.call(obj);
}
bar();
bar.call(window);
因为硬绑定非常常用的方法,所有ES5也提供了内置的方便.bind
function foo(){
console.log(this);
console.log(this.a) ;
}
var obj = {
a: 23
}
var bar = foo.bind(obj)
bar();
此时就算你使用call,apply 也改变不了函数的bar的this绑定
function foo(){
console.log(this);
console.log(this.a) ;
}
var obj = {
a: 23
}
var a = 33;
var bar = foo.bind(obj)
bar.call(window);
2.4 new 操作符
new操作符在构造函数那一节的的时候已经讲过,
现在我们就知道关于this指向的绑定情况有四种.那么接下来看看优先级的问题
- 优先级
你需要做的就是找到函数的调用位置并判断应用了那条规则,如果某个调用位置可以应用多条规则,我们就需要通过优先级来区分
默认的优先级最低
-
显示优先级高于隐式
function foo(){
console.log(this.a)
}
var obj1 = {
a: 10,
foo: foo
}
var obj2 = {
a: 20,
foo: foo
}
obj1.foo(); // 10
obj2.foo(); // 20obj1.foo.call(obj2); // 20 obj2.foo.call(obj1); // 10 -
new绑定比隐式绑定优先级高
function foo(aa){
this.a = aa
}
var obj = {
foo:foo
}
obj.foo(2);
console.log(obj.a); // 2var bar = new obj.foo(4); console.log(obj.a); // 2 console.log(bar.a); // 4 -
new操作符比显示绑定中的硬绑定优先级高
function foo(aa){
this.a = aa;
}
var obj = {}
var bar = foo.bind(obj);bar(20); console.log(obj.a); var baz = new bar(30); console.log(obj.a); console.log(baz.a);至于为什么用new操作符还要用bind绑定是为了提前传一些参数进去
判断原则
函数是否使用new操作符调用,如果有,那么this将绑定到新创建的对象
函数是否使用call,apply或者硬绑定,如果有,this指向显示绑定的对象
函数是否在某个上下文对象中调用,如果有this指向那个上下文对象(隐式绑定)
如果以上都不是,那就是默认绑定,
特殊情况
被忽略的this
function foo(){
console.log(this.a)
}
var a = 2;
foo.call(null); // 2
如果你传入null或undefined将会忽略传入的值,实际使用默认值
那么什么时候会需要用到传入null的情况呢
使用apply展开参数
function foo(a,b){
console.log("a: "+ a + " ,b: " + b);
}
foo.apply(null,[2,3]);
因为这里我们不需要关心this指向,那么我们用null占位最好,
题:
var a = 10;
function aa(){
console.log(a);
a = 0;
console.log(this.a);
var a;
console.log(a);
}
aa();