习题讲解_this指向.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  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. <script>
  10. //1、写出下列输出结果
  11. // 全局变量才会放到window对象中
  12. // var x = 10;
  13. // function test() {
  14. // var x = 20
  15. // console.log(this.x)
  16. // }
  17. // test()
  18. //2、写出下列输出结果
  19. // var name = "window"
  20. // var obj = {
  21. // name: "obj",
  22. // func1: function () {
  23. // console.log(this.name);//obj
  24. // (function () {
  25. // console.log(this.name);//window
  26. // })()
  27. // }
  28. // }
  29. // obj.func1()
  30. //3、写出下列结果
  31. // var name = "the window";
  32. // var object = {
  33. // name: "My Object",
  34. // getName: function () {
  35. // return this.name;
  36. // }
  37. // }
  38. // console.log(object.getName());//My Object
  39. // console.log((object.getName)());//My Object
  40. // console.log((object.getName = object.getName)());//the Window
  41. // let a = 10;
  42. // if(a=3){
  43. // console.log(a);
  44. // }
  45. //4、下列代码中当div的点击事件触发时输出的结果是?
  46. // document.getElementById("div").onclick = function () {
  47. // console.log(this);//div
  48. // };
  49. //5、请写出下列代码运行结果
  50. // var name = "window"
  51. // var obj = {
  52. // name: "obj"
  53. // }
  54. // setInterval(function () {
  55. // console.log(this.name);//window
  56. // }, 300)
  57. // setInterval(function () {
  58. // console.log(this.name);//obj
  59. // }.call(obj), 300)
  60. //6、请补全下列代码
  61. // function foo() {
  62. // //补全此处代码实现每隔一秒输出 hello world
  63. // // console.log("hello world");
  64. // return function(){
  65. // console.log("hello world");
  66. // }
  67. // }
  68. // window.setInterval(foo(), 1000);
  69. // 7、补全下列代码实现 1+2+3+4
  70. // function add(c, d) {
  71. // return this.a + this.b + c + d;
  72. // }
  73. // var obj = {
  74. // a:1,
  75. // b:2
  76. // }
  77. // add.call(obj,3,4);
  78. /*
  79. 在此补全代码 以两种以上方法实现
  80. */
  81. //8、写出下列输出结果
  82. // function f() {
  83. // return this.a;
  84. // }
  85. // var g = f.bind({ a: "azerty" });
  86. // console.log(g());//azerty
  87. // // bind 不可以重复绑定 如果重复绑定 会返回第一个绑定的结果
  88. // var h = g.bind({ a: 'yoo' });
  89. // console.log(h());//azerty
  90. // var o = { a: 'loveCoding', f: f, g: g, h: h };
  91. // console.log(o.f(), o.g(), o.h());//loveCoding azerty azerty
  92. // //9、补全下列代码
  93. // var o = { prop: 'loveCoding' };
  94. // function independent() {
  95. // return this.prop;
  96. // }
  97. // //在此补全代码
  98. // o.f = independent.bind(o);
  99. // console.log(o.f()); // loveCoding
  100. //10、用call 或 apply 实现bind 方法
  101. function foo(b,c,d) {
  102. console.log(this.a,b,c,d)
  103. }
  104. var obj = {
  105. a: "hello"
  106. }
  107. Function.prototype.bind2 = function(){
  108. // arguments 是类数组对象 可以获取所有参数
  109. // console.log(arguments);
  110. var newObj = arguments[0];
  111. // 获取所有参数
  112. var args = Array.from(arguments).slice(1);
  113. console.log(args);
  114. var _this = this;
  115. return function(){
  116. _this.apply(newObj,args)
  117. }
  118. }
  119. var foo2 = foo.bind2(obj,"world","你好","世界");
  120. foo2()
  121. </script>
  122. </body>
  123. </html>