前端提高篇（十六）JS进阶12函数this指针

console.log(‘e2:’,this.x);

}

e2();

}

f();

f.e();

e2函数输出为10，即e2函数的this是window，e2函数虽然在f函数的作用域内，但属于window对象；

而其中的匿名函数，是f的一个属性，this指向的是f，输出为1000

var x = 10;

function f(){

f.x = 1000;

f.e = function(){

console.log(this.x);

}

function e2(){

console.log(‘e2:’, this);

}

e2();

}

f();

f.e();

一个函数可以被多个对象拥有，但使用函数时，this依然是那个对象

var name = ‘win’;

function f(){

console.log(this.name);

}

var obj1 = {

name:‘obj1’,

f:f,//把f函数的指针赋值给obj1的属性f

}

var obj2 = {

name:‘obj2’,

f:f,

}

f();//相当于window.f();指向window

obj1.f();//this指向obj1

obj2.f();//this指向obj2

运行效果：符合“谁拥有这个函数，this就是谁”的定义，每个对象使用这个函数时，this指针指向自己，输出的name也就是自己的name

内存管理方面：

函数是特殊对象，在存储时，是将地址存在栈中，将对象内容存在堆中，并有一个指针做栈与堆的链接，链接地址与对象

当多个对象都有相同的函数时，存储的是这个函数的地址，

当对象存储的是函数执行后得到的结果，如果函数没有return，得到的是undefined

var name = ‘win’;

function f(){

console.log(this.name);

}

var obj1 = {

name:‘obj1’,

f:f(),//这里执行了一次f函数，是window的f，会输出’win’,但obj1.f为undefined

}

var obj2 = {

name:‘obj2’,

f:f,

}

console.log(‘obj1.f:’+obj1.f);

// f();

// obj1.f();

// obj2.f();

如果有return值，并且return了函数本身，跟之前的情况就一样了

var name = ‘win’;

function f(){

console.log(this.name);

return f;

}

var obj1 = {

name:‘obj1’,

f:f(),//此时obj1又拥有了f函数

}

var obj2 = {

name:‘obj2’,

f:f,

}

console.log(‘obj1.f:’+obj1.f);

// f();

obj1.f();

// obj2.f();

第一个’win’是obj1执行了一次f()函数而打印的，最后的obj1是执行了obj1的f属性，即obj1.f();

练习：

函数类使用函数，this指向具体的对象，依然是看哪个对象拥有了这个使用了this指针的函数

1.定义了一个函数A，并且嵌套了函数B：

function f(){

console.log(‘this1:’,this);

this.name = ‘ccy’;//修改了全局变量中的name

this.e = function(){

console.log(this.name);//输出"ccy"

console.log(‘this2:’,this);

}

}

var name = ‘yyy’;

f();

e();

f函数里的this.name和this.e中的this指的是window，

匿名函数里的this.name指的也是window，这个匿名函数，是window对象中e属性的值

也就是，这段代码中的三个this，都指的同一个对象：window

因此运行效果是：

2.函数类

function f(){

console.log(‘this1:’,this);//这里的this，指的是新new出来的对象cc

this.name = ‘ccy’;

this.e = function(){

console.log(‘this.name’,this.name);

console.log(‘this2:’,this);//拥有这个匿名函数的是新对象cc，this指针也指向cc

}

}

var name = ‘yyy’;

var cc = new f();

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】