10
0

15_this.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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 world</div>
  10. <script>
  11. var oBox = document.getElementById("box");
  12. // oBox.onclick = function(){
  13. // console.log(this.innerText);
  14. // }
  15. // oBox.onclick = function(){
  16. // console.log(this);
  17. // (function(){
  18. // console.log(this)
  19. // })()
  20. // }
  21. // 箭头函数内没有this概念 但是里面可以使用this this指向的是外层的this
  22. // oBox.onclick = function(){
  23. // console.log(this);
  24. // (()=>{
  25. // console.log(this)
  26. // })()
  27. // }
  28. // var obj = {
  29. // a:10,
  30. // foo:function(){
  31. // console.log(this.a);
  32. // }
  33. // }
  34. // var a = 20;
  35. // var obj = {
  36. // a:10,
  37. // foo:function(){
  38. // console.log(this.a);
  39. // (function(){
  40. // console.log(this.a)
  41. // })()
  42. // }
  43. // }
  44. // obj.foo();
  45. // var a = 10;
  46. // function foo2(){
  47. // var a = 1
  48. // console.log(this.a);
  49. // }
  50. // window.foo2();
  51. // this 指向 : 指向调用当前函数的对象 要么指向window
  52. // 对象当中方法默认指向当前对象 如果方法内有其他函数 ,其他函数内部的this指向window
  53. // 普通函数this指向window
  54. // let a = 10;
  55. // function foo(){
  56. // b = 20;
  57. // console.log(this.b)
  58. // }
  59. // foo()
  60. // var a = 10;
  61. // function foo(){
  62. // console.log(this.a)
  63. // }
  64. // var obj = {
  65. // a:"hello",
  66. // foo:function(){
  67. // console.log(this.a);
  68. // }
  69. // }
  70. // obj.foo = foo;
  71. // obj.foo();
  72. function foo(a,b){
  73. console.log(this.a+a+b)
  74. }
  75. var obj = {
  76. a:"hello",
  77. }
  78. // call 修改函数的this指向 call里面第一个参数是要新的this指向的对象
  79. // 如果被改变的函数内部需要参数 则call方法从第二个参数起传递给当前函数
  80. // foo.call(obj,"world","你好");
  81. // aplly 跟call 基本相同,但是aplly只接受两个参数第一个是要指向的对象 第二个参数是数组 数组内部是要传递给函数的参数
  82. // foo.apply(obj,["world","你好"])
  83. // bind 它是将函数的this指向修改后返回一个函数,并不是立即执行。参数部分跟call方法一样
  84. // var foo2 = foo.bind(obj,"hello","你好")
  85. // foo2();
  86. </script>
  87. </body>
  88. </html>