JavaScript基础知识--this指向(学习记录)

在JavaScript中，this的指向一直以来是比较难以理解的一个知识点，所以在这里做一个记录。以每一个例子分析this的指向

function foo() {
  console.log(this);
}
foo();//这种情况下this的指向为window,因为默认通过window调用，严格模式下this为undefined

function foo() {
  console.log(this);
}
let obj = {
  fn:foo
}
obj.fn();//这种情况下this的指向为obj，因为obj在调用fn

箭头函数是不绑定this的，什么意思呢？当箭头函数出现this时，会向当前作用域的上层去查找

const app = () => {
 console.log(this)
}
let obj = {
 app
}
obj.app();//这种情况下this的指向为window，app函数作用域向上查找this为window

const app = () => {
  console.log(this)
}
function foo() {
  console.log(this);
}
let obj = {
  fn: function () {
    app();//这种情况下输出为window
    foo();//这种情况下输出为window
  }
}
obj.fn();

function foo() {
 let obj = {
   fn: () => {
     console.log(this)
   }
 }
 return obj;
}
let p = {
 fn:foo
}
const res = p.fn();
res.fn();//这种情况下输出为p

同理

function foo() {
 return () => {
   console.log(this);
 }
}
let obj = {
 foo
};
obj.foo()();//obj

apply函数

let obj = {
 name:"appap"
}
function fn() {
 console.log(this);
}
function app() {};

fn.apply(obj);//obj
fn.apply(undefined);//window
fn.apply(null);//window
fn.apply(NaN);//Number
fn.apply(1);//Number
fn.apply("1");//String
fn.apply();//window
fn.apply(app);//就是app函数
fn.apply(Symbol("1"))//Symbol

bind函数

let obj = {
 name:"appap"
}
const fn = () => {
 console.log(this);
}
let foo = fn.bind(obj);
foo()//window

let obj = {
 name:"appap"
}
function fn() {
 console.log(this);
 return function () {
   console.log(this);
 }
}
let foo = fn.bind(null)();//这里只要传入的是null则第一个this指向window,
foo()

bind的优先级是高于apply和bind的

function foo() {
 console.log(this);
}
const fn = foo.bind({op:"op"},);
fn.apply({ name: "apap" });//{op:"op"}
fn.call({ name: "apap" });//{op:"op"}

new的优先级高于bind

function foo() {
  console.log(this);
}
let fn = foo.bind({ name: "foo" });
let p = new fn();//输出{}