this指向

1.1词法作用域

之前说过js的作用域包括全局作用域和函数作用域,而其实js的作用域是词法作用域,其主要特征为是在函数定义时确定的。
动态作用域呢是在函数运行时确定的,this也是如此。

function foo(){
    console.log(a);
}
function bar(){
    var a = 3;
    foo();
}
bar();
var a = 2;

如果js是动态作用域这里的结果应该是3,可js是词法作用域所以结果为2。词法作用域关心的是函数在何处定义,动态作用域关注函数在何处被调用。上述代码中,foo函数是定义在window上的。而在执行bar函数时需要执行foo函数,其本身函数作用域内并为有foo,也是沿着作用域链找到window全局对象,发现foo函数,于是执行。

1.2调用栈

在研究this指向前先理解调用栈。
调用位置就是函数被调用的位置。

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的调用位置

1.3this指向

this指向的是一个对象,我们把这个对象叫做函数的执行上下文(执行环境)。
函数被调用时this指向调用函数的对象,并于预编译阶段在函数的AO作用域里添加this作为属性名,并默认赋值undefined。

function test(){
console.log(this)//undefined
}

2this绑定

2.1默认绑定

function test() {
console.log(this.a)
}
var a = 10;
test()//10

2.2隐式绑定

考虑函数调用位置的上下文对象。最大的上下文对象就是window,所以默认绑定似乎又多了一种理解方式。
隐式绑定一般是通过某个对象进行函数调用。

function showThis() {
console.log(this.num)
}
obj1 = {
num:1,
fun:showThis
}
obj2 = {
num : 2,
fun:showThis
}
obj1.fun();//1
obj2.fun();//2

我们改一下代码。

function showThis() {
console.log(this.num)
}
obj1 = {
num:1,
fun:showThis
}
obj2 = {
num : 2,
obj1:obj1,
}
obj2.obj1.fun();//1

showThis是在obj1上调用的,不管obj2。

函数名复值情况会丢失绑定对象.

function showThis() {
console.log(this.num)
};
obj1 = {
num:1,
fun:showThis
};

let myFun = obj1.fun;
myFun();//undefined

上述代码相当于

function showThis() {
console.log(this.num)
};
obj1 = {
num:1,
fun:showThis
};
//obj1.fun == showThis;
showThis();//undefined

无疑window对象上没有num这个属性

2.3显式绑定

隐式绑定时,必须在一个对象内部包含一个指向函数的属性.并通过这个属性间接的应用函数.从而把this隐式的绑定到这个对象上.
显示绑定就不必如此。

2.3.1

call与apply方法
使用显式绑定方法(还有bind),意味着执行函数,并修改this指向的对象。

function showThis() {
console.log(this.num)
}
obj1 = {
num:1,
}
obj2 = {
num : 2,
}

showThis.call(obj2);//2
showThis.call(obj1);//1
showThis.apply(obj2);//2
showThis.apply(obj1);//1

这两者有什么区别呢,
apply与call接受的第一个参数为this指向,还可以继续添加参数,而后面的参数会传给函数。

function showThis(a,b) {
console.log(a + b + this.c)
}
obj1 = {
c:1,
}
obj2 = {
c: 2,
}
showThis.apply(obj1,[1,2])//1+2+1=4;
showThis.call(obj2,1,2)//1+2+2 = 5;

2.3.2

再来介绍一下bind方法,bind方法也叫硬绑定,是显示绑定但又能不被apply和call方法改变。

function showThis() {
console.log(this.a)
}
obj1 = {
a:1,
}
var a = 2;
let test = showThis.bind(obj1);//1
test.call(window)

2.4 new操作符

举个例子

function myTest(n) {
let num = n;
console.log(num)

}
let fun = new myTest(10);//10

3优先级

3.1默认最低;

这是毫无疑问的,不然就没有显式和隐式绑定了;

3.2显式高于隐式

function showThis() {
console.log(this.num)
}
obj1 = {
num:1,
fun:showThis
}
obj2 = {
num : 2,
fun:showThis
}
obj1.fun();//1
obj2.fun();//2
obj1.fun.call(obj2);//2
obj2.fun.call(obj1);//1
obj1.fun.apply(obj2);//2
obj2.fun.apply(obj1);//1

3.3new 高于隐式

function myTest(n) {
this.num = n;
}
obj1 = {
myTest:myTest
}
obj1.myTest(10);
let test1 = new obj1.myTest(100);
console.log(obj1.num);//10
console.log(test1.num);//100

3.4 new 比bind优先级高;

function myTest(n) {
this.num = n;
}
obj1 = {}
let test1 = myTest.bind(obj1);
test1(10);
let test2 =  new test1(100)
console.log(obj1.num);//10
console.log(test2.num);//100

4特殊操作

4.1

null和apply方法地第一个参数可传入null;就意味着不指向任何对像;

function sum(a,b){
console.log(a + b)
}
sum.apply(null,[1,2]);//1+2=3
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,335评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,895评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,766评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,918评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,042评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,169评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,219评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,976评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,393评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,711评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,876评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,562评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,193评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,903评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,699评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,764评论 2 351

推荐阅读更多精彩内容