day-9.1 JS自带API（call ）

API是JS自带的预先已经写好的方法，也就是函数，当我们去了解一个方法或者函数的时候，应该主要关注它的三个特性（功能、参数、返回）；

比如：

1 <body>
2     <div id="wrap"></div>
3     <script>
4         var oWrap = document.getElementById("wrap");//getElementById就是JS预先写好的方法函数。
5     </script>
6 </body>

 

JS里面这种方法很多。

今天我们要说的是call 、apply、和bind 这3个方法

正常来说，this指向一般是指向执行这个函数的对象，即谁执行的函数，this指向谁，而不是定义；

比如

1 <script>
2             var a = function (){
3                 console.log(this);
4             };
5             a(); //是window这个对象在执行，所以console.log(this)，将会输出window;
6 </script>
 1 <body>
 2         <div id="wrap"></div>
 3         
 4         <script>
 5             var oWrap = document.getElementById("wrap"); 
 6                 oWrap.onclick = function () {   //在window下定义
 7                     console.log(this);  //该函数的执行是oWrap，所以弹出this时，是弹出oWrap;
 8                 };
 9         </script>
10 </body>

这些指向都是JS运行的既定逻辑，即谁执行的函数，this指向谁。

有时候我们需要在这种事件函数内传参，重新指向的时候可以用嵌套的方式去完成

比如：

 1 <body>
 2         <div id="wrap"></div>
 3         <div id="box"></div>
 4         <script>
 5             var oWrap = document.getElementById("wrap"),
 6                 oBox = document.getElementById("box");
 7                 oWrap.onclick = function () {
 8                     a(6); //指向window ;2、改成 a (6,this)
 9                 };
10                 oBox.onclick = function () {
11                     a(5);  //指向window ; 2、改成 a (5,this)
12                 };
13                 function a (num) {   //2、加一个形参：g
14                     console.log(num + ":" + this);    ///2、this改成g， 输出的是各自事件的对象。
15                     console.log(this);
16                 }
17         </script>
18 </body>

上述通过参数指向的方式比较混乱，语意上比较难理解，影响代码可读性。这个时候就有一个重定向的API，就是call：

call的实参，第一个实参对应的是重写的this指向的对象（可以是任意对象，包括数字：输出的结果会是一个number对象。），从第二个实参才开始对应函数a的形参。

 1     <body>
 2         <div id="wrap"></div>
 3         <div id="box"></div>
 4         <div id ="test"></div>
 5         <script>
 6             var oWrap = document.getElementById("wrap"),
 7                 oBox = document.getElementById("box"),
 8                 oTest = document.getElementById("test");
 9                 oWrap.onclick = function () {
10                     a.call(oTest,6);  //通过call，可以轻松修改函数的this指向，而不用去修改函数a的代码。这样结构清晰，不混乱。 第一个实参oTest是修改函数执行时的this指向，第二个实参是对应函数的第一个形参，往下对应。这里也体现了函数的this指向
11 　　　　　　　　　　　　　　　　　　　　　　　　时执行时确认的。这里尽量不要用变量名，最好用this，如果这是一段模块代码，用一个自执行的函数嵌套的话，会造成闭包。JS有一个说法就是：能不用引用的地方，就不使用引用。
12                 };
13                 oBox.onclick = function () {
14                     a.call(oTest,5);
15                 };
16                 function a (num) {
17                     console.log(num + ":" + this);
18                     console.log(this);
19                 }
20         </script>
21     </body>

 

 

 

 

当我们想尝试特定指向时，即不管谁执行，this都指向到我想要的对象的时候，就需要到call, apply , bind这3个API

 

posted @ 2018-06-11 23:06  bibiguo  阅读(180)  评论(0)    收藏  举报