16_this指向.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div id="box">hello</div>
  10. <script>
  11. // this 指向 谁调用的函数this就指向谁
  12. // this 指向问题 场景一
  13. // let obj = {
  14. // name: '张三',
  15. // age:18,
  16. // sex:"男",
  17. // talk(){
  18. // console.log(this.name);
  19. // }
  20. // }
  21. // obj.talk();
  22. // this 指向问题 场景二
  23. // let oBox = document.getElementById('box');
  24. // oBox.onclick = function(){
  25. // console.log(this);
  26. // }
  27. // function foo(){
  28. // console.log(this);
  29. // }
  30. // foo();
  31. // var a = 10;
  32. // console.log(this.a);
  33. // console.log(window.a);
  34. // let obj = {
  35. // name: '张三',
  36. // talk(){
  37. // console.log(this.name);
  38. // function foo(){
  39. // console.log(this)
  40. // }
  41. // foo();
  42. // }
  43. // }
  44. // obj.talk();
  45. // window.setTimeout(function(){
  46. // console.log(this);
  47. // },1000)
  48. var age = 19;
  49. var obj = {
  50. name: '张三',
  51. age:18
  52. }
  53. function foo(a){
  54. console.log(this.age,a);
  55. }
  56. // foo("hello");
  57. // foo.call(obj,"hello");
  58. // foo.apply(obj,["hello"]);
  59. // var foo2 = foo.bind(obj,"hello");
  60. // foo2();
  61. // call 可以改变this指向 参数有多个 第一个是this指向新对象 后面的参数是传入foo的参数
  62. // foo.call(obj,"hello");
  63. // apply 可以改变this指向 参数只有两个 第一个是this指向新对象 第二个是数组 里面是传入foo的参数
  64. // foo.apply(obj,["hello"])
  65. // bind 可以改变this指向 参数有多个 第一个是this指向新对象 后面的参数是传入foo的参数
  66. // let foo2 = foo.bind(obj,"hello");
  67. // foo2();
  68. </script>
  69. </body>
  70. </html>