一、思维导图

二、demo理解

1.new绑定

function fn(age) {
    this.age = age
}
const result = new fn('张三')
console.log('result',result.age)
// 输出结果为：result 张三
// 使用了new操作符，new fn时，this绑定到了fn上

// new操作符创建的对象和字面量形式创建出来的对象结果一致
var age = '18'
// new操作符创建
function Age(age) {
    this.age = age
    this.fn = function() {
        console.log(this.age)
        return function() {
            console.log(this.age)
        }
    }
}

// 字面量形式创建的对象
var Age2 = {
    age: '15',
    fn: function() {
        console.log(this.age)
        return function() {
            console.log(this.age)
        }
    }
}

var result = new Age('20')
result.fn()()
Age2.fn()()
//输出结果：
20
18
15
18

// new过程中return 一个对象，此时thi指向为返回的对象
function fn(age) {
    this.age = age
    return {}
}
//输出为：undefined
var a = new fn('18')
console.log(a.age)

//如果返回一个简单的类型，this指向实例对象
function fn(age) {
    this.age = age
    return 2
}

var a = new fn('18')
console.log(a.age)
// 输出为：18
//如果返回的是null，this指向实例对象
function fn(age) {
    this.age = age
    return 2
}

var a = new fn('18')
console.log(a.age)
// 输出为：18

2.默认绑定

let、const声明的变量不会被绑定的window对象上
let a = 10
const b = 20
function foo () { 
    console.log(this.a) console.log(this.b) 
}
foo()
console.log(window.a)
输出结果均为：undefined

3.隐式绑定

var name = 'outer'
function a() {
    console.log('hello', this.name)
}
var person = {
    name: 'personinner',
    a: a
}
var result = person.a
result()

//a方法赋值给了result，result的调用时window完成的

[juejin.cn/post/704714…]