05-this绑定规则细节和面试题分析

this绑定规则细节和面试题分析

this补充

setTimeout(function () {
  console.log(this);
}, 2000);
// window

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script src="./01-一些函数的this分析.js"></script>
  </body>
</html>

const boxDiv = document.querySelector(".box");
boxDiv.onclick = function () {
  console.log(this);
};
// <div class="box"></div>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script src="./01-一些函数的this分析.js"></script>
  </body>
</html>

const boxDiv = document.querySelector(".box");
boxDiv.addEventListener("click", function () {
  console.log(this);
});
boxDiv.addEventListener("click", function () {
  console.log(this);
});
boxDiv.addEventListener("click", function () {
  console.log(this);
});
// <div class="box"></div>
// <div class="box"></div>
// <div class="box"></div>

var names = ["abc", "cba", "nba"];
names.forEach(function (item) {
  console.log(item, this);
});
// abc window
// cba window
// nba window

var names = ["abc", "cba", "nba"];
names.forEach(function (item) {
  console.log(item, this);
}, "abc");
// abc String {"abc"}
// cba String {"abc"}
// nba String {"abc"}

this绑定规则优先级

优先级

  • new绑定 > 显示绑定 > 隐式绑定 > 默认绑定

优先级-显式高于隐式绑定

var obj = {
  name: "obj",
  foo: function () {
    console.log(this);
  }
};
obj.foo();
obj.foo.call("abc");
// { name: 'obj', foo: [Function: foo] }
// [String: 'abc']

var obj = {
  name: "obj",
  foo: function () {
    console.log(this);
  }
};
obj.foo();
obj.foo.call("abc");
obj.foo.apply("abc");
// { name: 'obj', foo: [Function: foo] }
// [String: 'abc']
// [String: 'abc']

var obj = {
  name: "obj",
  foo: function () {
    console.log(this);
  }
};
var bar = obj.foo.bind("cba");
bar();
// [String: 'cba']

function foo() {
  console.log(this);
}
var obj = {
  name: "obj",
  foo: foo.bind("aaa")
};
obj.foo();
// [String: 'aaa']

优先级-new高于隐式绑定

var obj = {
  name: "obj",
  foo: function () {
    console.log(this);
  }
};
var f = new obj.foo();
// foo {}

优先级-new高于显式绑定

function foo() {
  console.log(this);
}
var bar = foo.bind("aaa");
var obj = new bar();
// foo {}

特殊绑定-忽略显示绑定

function foo() {
  console.log(this);
}
foo.apply("abc");
foo.apply({});
foo.apply(null);
foo.apply(undefined);
// [String: 'abc']
// {}
// window
// window

function foo() {
  console.log(this);
}
foo.apply("abc");
foo.apply({});
foo.apply(null);
foo.apply(undefined);
var bar = foo.bind(null);
bar();
// [String: 'abc']
// {}
// window
// window
// window

特殊绑定-间接函数引用

var obj1 = {
  name: "obj1",
  foo: function () {
    console.log(this);
  }
};
var obj2 = {
  name: "obj2"
};
obj2.bar = obj1.foo;
obj2.bar();
// { name: 'obj2', bar: [Function: foo] }

var obj1 = {
  name: "obj1",
  foo: function () {
    console.log(this);
  }
};
var obj2 = {
  name: "obj2"
};
(obj2.bar = obj1.foo)();
// window

function foo(el) {
  console.log(el, this.id);
}
var obj = {
  id: "awesome"
};
[1, 2, 3].forEach(foo, obj);
// 1 awesome
// 2 awesome
// 3 awesome

箭头函数

  • ES6新增的特性
    • 箭头函数不会绑定this，arguments属性
    • 箭头函数不能作为构造函数来使用(不能和new一起来使用，会抛出错误)

箭头函数的使用解析

var nums = [10, 20, 45, 78];
nums.forEach(item => {
  console.log(item);
});
// 10
// 20
// 45
// 78

var nums = [10, 20, 45, 78];
var result1 = nums.forEach(item => console.log(item));
var result2 = nums.filter(item => item % 2 === 0);
console.log(result1);
console.log(result2);
var result = nums
  .filter(item => item % 2 === 0)
  .map(item => item * 100)
  .reduce((prev, item) => prev + item);
console.log(result);
// 10
// 20
// 45
// 78
// undefined
// [ 10, 20, 78 ]
// 10800

var bar = () => {
  return { name: "why", age: 18 };
};
console.log(bar());
// { name: 'why', age: 18 }
var bar = () => ({ name: "why", age: 18 });
console.log(bar());
// { name: 'why', age: 18 }

箭头函数的this获取

var name = "why";
var foo = () => {
  console.log(this);
};
foo();
foo.call("abc");
var obj = { foo: foo };
obj.foo();
// window
// window
// window

var obj = {
  data: [],
  getData: function () {
    setTimeout(() => {
      var result = ["abc", "cba", "nba"];
      this.data = result;
    }, 2000);
  }
};
obj.getData();
setTimeout(() => {
  console.log(obj.data);
}, 3000);
// [ 'abc', 'cba', 'nba' ]

面试题

var name = "window";
var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};
function sayName() {
  var sss = person.sayName;
  sss(); 
  person.sayName(); 
  (person.sayName)(); 
  (b = person.sayName)(); 
}
sayName();
// window
// person
// person
// window

var name = "window";
var person1 = {
  name: "person1",
  foo1: function () {
    console.log(this.name);
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name);
    };
  },
  foo4: function () {
    return () => {
      console.log(this.name);
    };
  }
};
var person2 = { name: "person2" };
person1.foo1();
person1.foo1.call(person2);
person1.foo2();
person1.foo2.call(person2);
person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);
person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);
// person1
// person2
// window
// window
// window
// window
// person2
// person1
// person2
// person1

var name = 'window'
function Person (name) {
  this.name = name
  this.foo1 = function () {
    console.log(this.name)
  },
  this.foo2 = () => console.log(this.name),
  this.foo3 = function () {
    return function () {
      console.log(this.name)
    }
  },
  this.foo4 = function () {
    return () => {
      console.log(this.name)
    }
  }
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.foo1()
person1.foo1.call(person2)
person1.foo2()
person1.foo2.call(person2)
person1.foo3()()
person1.foo3.call(person2)()
person1.foo3().call(person2)
person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)
// person1
// person2
// person1
// person1
// window
// window
// person2
// person1
// person2
// person1

var name = 'window'
function Person (name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2: function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.obj.foo1()()
person1.obj.foo1.call(person2)()
person1.obj.foo1().call(person2)
person1.obj.foo2()()
person1.obj.foo2.call(person2)()
person1.obj.foo2().call(person2)
// window
// window
// person2
// obj
// person2
// obj
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容