前端八股整理（代码输出 01）｜this指针输出题

文章目录

[前端八股整理（代码输出 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

red

blue

red