文章目录
- [前端八股整理（代码输出 01）｜this指针输出题](#前端八股整理（代码输出 01）｜this指针输出题)
- 1.基础知识
-
- [1.1 普通函数调用：this 默认指向全局 / undefined](#1.1 普通函数调用：this 默认指向全局 / undefined)
- [1.2 对象方法调用：谁调用，this 指向谁](#1.2 对象方法调用：谁调用，this 指向谁)
- [1.3 赋值丢失 this：看最终调用方式](#1.3 赋值丢失 this：看最终调用方式)
- [1.4 嵌套函数里的 this](#1.4 嵌套函数里的 this)
- [1.5 箭头函数：没有自己的 this](#1.5 箭头函数：没有自己的 this)
- [1.6 call / apply / bind：手动改 this](#1.6 call / apply / bind：手动改 this)
- [1.7 new 调用：this 指向新创建的对象](#1.7 new 调用：this 指向新创建的对象)
- 2.模拟题
- 3.真题
前端八股整理（代码输出 01）｜this指针输出题
1.基础知识
1.1 普通函数调用：this 默认指向全局 / undefined
javascript
function fn() {
console.log(this)
}
fn()在浏览器非严格模式下：this -> window
严格模式下：this -> undefined
1.2 对象方法调用：谁调用，this 指向谁
javascript
const obj = {
name: '小徐',
say() {
console.log(this.name)
}
}
obj.say()输出:小徐
调用形式:obj.say()
1.3 赋值丢失 this：看最终调用方式
javascript
const obj = {
name: '小徐',
say() {
console.log(this.name)
}
}
const fn = obj.say
fn()fn() 这是普通函数调用，不是 obj.say()。所以非严格模式：this -> window,严格模式：this -> undefined
1.4 嵌套函数里的 this
javascript
const obj = {
name: '小徐',
say() {
function inner() {
console.log(this.name)
}
inner()
}
}
obj.say()这里 say里面的 this是 obj，但 inner()是普通函数调用。所以 inner里的 this不指向 obj。obj.say(),只能保证 say 里的 this 是 obj，不能保证 say 里面普通调用的函数 inner() 也指向 obj。
进入到 say say 这个函数内部是 this 是 obj,但是 inner 是普通函数调用,所以指向全局作用域
1.5 箭头函数：没有自己的 this
箭头函数是最特殊的：箭头函数没有自己的 this，它的 this 来自定义时外层作用域。
javascript
const obj = {
name: '小徐',
say() {
const inner = () => {
console.log(this.name)
}
inner()
}
}
obj.say()输出:小徐
因为 inner 是箭头函数，它没有自己的 this，所以向外找。外层 say 的 this 是 obj，所以 inner 里的 this 也是 obj。
1.6 call / apply / bind：手动改 this
call
javascript
function say() {
console.log(this.name)
}
const obj = {
name: '小徐'
}
say.call(obj)- 输出:小徐
call的第一个参数就是指定this。
apply
javascript
function add(a, b) {
console.log(this.name, a + b)
}
const obj = {
name: '小徐'
}
add.apply(obj, [1, 2])输出:小徐 3
bind
javascript
function say() {
console.log(this.name)
}
const obj = {
name: '小徐'
}
const fn = say.bind(obj)
fn()输出:小徐
bind不会立即执行函数，而是返回一个绑定好 this的新函数。
1.7 new 调用：this 指向新创建的对象
javascript
function Person(name) {
this.name = name
}
const p = new Person('小徐')
console.log(p.name)输出:小徐
2.模拟题
题目一:
javascript
var name = 'window'
const obj = {
name: 'obj',
say() {
console.log(this.name)
}
}
obj.say()输出 obj.name
题目二:
javascript
var name = 'window'
const obj = {
name: 'obj',
say() {
console.log(this.name)
}
}
const fn = obj.say
fn()输出:window.name
题目三:
javascript
var name = 'window'
const obj = {
name: 'obj',
say() {
function inner() {
console.log(this.name)
}
inner()
}
}
obj.say()输出:window.name
题目四:
javascript
var name = 'window'
const obj = {
name: 'obj',
say() {
const inner = () => {
console.log(this.name)
}
inner()
}
}
obj.say()输出:obj.name
题目五:
javascript
var name = 'window'
const obj = {
name: 'obj',
say: () => {
console.log(this.name)
}
}
obj.say()输出:window.name
对象字面量 {} 不会创建自己的 this作用域。箭头函数的外层是全局作用域
题目六:
c
var name = 'window'
function say() {
console.log(this.name)
}
const obj = {
name: 'obj'
}
say.call(obj)输出:obj.name
题目七:
javascript
var name = 'window'
const obj = {
name: 'obj',
say() {
console.log(this.name)
}
}
const obj2 = {
name: 'obj2'
}
obj2.say = obj.say
obj2.say()输出:obj2.name
3.真题
题目来源:卓世科技
var foo = 'red'
var myObj = {
foo: 'blue',
fn: function() {
var self = this
console.log(this.foo);
console.log(self.foo);
(function(){
console.log(this.foo);
console.log(self.foo);
}())
},
fn2: () => {
console.log(this.foo)
}
}
myObj.fn()
myObj.fn2()
输出结果输出结果:
谁调用 this 指向谁
myobj 中的 this 应该是他本身
(function(){
console.log(this.foo);
console.log(self.foo);
}())属于立即执行函数,它是一个普通函数自己执行,this 指向最外层
blue
blue
red
blue
red