call、 apply和 bind的使用

一、用途

call()、apply()、bind() 都是用来重定义 this 这个对象的，

二、区别

call：改变了this指向 并 让函数执行，传递参数一个个传递
apply：改变了this指向 并 让函数执行，传送参数必须是数组
bind：改变了this指向 函数不执行。

三、使用

1.数据类型的检测

typof的不足：检测基本数据类型OK，对于引用数据类型来说，检测function也可以检测到，但是其它的检测的比较笼统，不够准确。

<script>console.log(typeof 1)     // number  okconsole.log(typeof "hello") // string  okconsole.log(typeof true)  // boolean  okvar a;console.log(typeof a)  // undefined  okconsole.log(typeof [1,2,3])  // object  okconsole.log(typeof {a:1})  // object  oklet d = new Date();console.log(typeof d)  // object  oklet r = new RegExp()    //正则console.log(typeof r)  // object  okfunction f(){}console.log(typeof f)  // function  ok
</script>

利用Object.prototype.toString.call可以非常精确地检测一个数据的数据类型。思路：一个对象在调用toSring时，如果它的原型上有toString方法，就调用它的原型上的toString。没有的话，和会找Object的原型对象上的方法。这里直接去调用Object上面的toString方法，返回数据类型。

<script>// call  1）改变toString中的this的指向   指向了{}//       2）让toString执行console.log(Object.prototype.toString.call(1)); // 此时会把1瞬间包装成对象console.log(Object.prototype.toString.call("hello")); // 此时"hello"也瞬间包装成对象了console.log(Object.prototype.toString.call(true))var a;console.log(Object.prototype.toString.call(a))  console.log(Object.prototype.toString.call({}))console.log(Object.prototype.toString.call([]))function f(){}console.log(Object.prototype.toString.call(f))let d = new Date()console.log(Object.prototype.toString.call(d))let r = new RegExp();console.log(Object.prototype.toString.call(r))
</script>

一般对象通过打点调用

2.简单封装类进行数据类型检测

<script>function getType(abc) {var rs = Object.prototype.toString.call(abc);rs = rs.substr(8)       //截取字符串，具体使用在下面var len = rs.lengthreturn rs.substr(0,len-1).toLowerCase()     //转化为小写}console.log(getType(123));console.log(getType([]));console.log(getType({}));console.log(getType(new Date));console.log(getType(new RegExp));var f = function(){}console.log(getType(f));
</script>

1）substr()

转自：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substr

substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。

语法

str.substr(start[, length])

参数

start：开始提取字符的位置。如果为负值，则被看作 strLength + start，其中 strLength 为字符串的长度（例如，如果 start 为 -3，则被看作 strLength + (-3)）。length：可选。提取的字符数。 

示例

    var str = "abcdefghij";console.log("(1,2): "    + str.substr(1,2));   // (1,2): bcconsole.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hiconsole.log("(-3): "     + str.substr(-3));    // (-3): hijconsole.log("(1): "      + str.substr(1));     // (1): bcdefghijconsole.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): abconsole.log("(20, 2): "  + str.substr(20,2));  // (20, 2):

3.字符串进行翻转

方法一

<script>var str = "123456789";// 把上面的字符串进行翻转var newStr = "";// ...for (var i=str.length-1; i>=0; i&#45;&#45;){newStr += str[i];}console.log(newStr); // 987654321
</script>

方法二：

<script>// 数组中有一个翻转的方法var arr = [1,2,3];console.log(arr.reverse()); // [3, 2, 1]// 目标：让字符串翻转// 把字符串变成数组var str = "123456789";console.log(str.split(""));      // split()分割字符串 ["1", "2", "3", "4", "5", "6", "7", "8", "9"]console.log(str.split("").reverse());           // ["9", "8", "7", "6", "5", "4", "3", "2", "1"]console.log(str.split("").reverse().join());    // 9,8,7,6,5,4,3,2,1console.log(str.split("").reverse().join(""));  // 987654321
</script>

1）join()

转自：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join

join() 方法返回一个字符串中从指定位置开始到指定字符数的字符。

语法

arr.join([separator])

参数

separator（可选）：指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果缺省该值，数组元素用逗号（,）分隔。如果separator是空字符串("")，则所有元素之间都没有任何字符。

返回值

一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。

示例

    var a = ['Wind', 'Rain', 'Fire'];var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"

4.伪数组变成一个真实的数组

伪数组：长的像数组，但不是真正的数组，本质是对象，没有数组原型对象上的方法。

常见的伪数组
1)通过document.getElementsByTagName获取的元素集合就是伪数组
2)函数内部的arguments

arguemnts是函数内部的一个对象,用来收集实参,函数外部是不能访问arguments的

方法一：

    <span>1</span><span>2</span><span>3</span><script>// 如何把一个伪数组(对象)转成真实的数组var spans = document.getElementsByTagName("span");var arr = [];// 把一个伪数组变成一个真实的数组for (let i = 0; i < spans.length; i++) {arr.push(spans[i]);}console.log(arr);
</script>

方法二：

<span>1</span><span>2</span><span>3</span><script>var spans = document.getElementsByTagName("span");console.log(Array.isArray(spans));  // false// spans本质还是对象  让span借用slice方向console.log(Array.prototype.slice.call(spans));console.log(Array.isArray(Array.prototype.slice.call(spans)));  // true
</script>

1）slice()

转自：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice

substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。

语法

str.slice(beginIndex[, endIndex])

参数

beginIndex:从该索引（以 0 为基数）处开始提取原字符串中的字符。如果值为负数，会被当做 strLength + beginIndex 看待，这里的strLength 是字符串的长度（例如， 如果 beginIndex 是 -3 则看作是：strLength - 3）
endIndex:可选。在该索引（以 0 为基数）处结束提取字符串。如果省略该参数，slice() 会一直提取到字符串末尾。如果该参数为负数，则被看作是 strLength + endIndex，这里的 strLength 就是字符串的长度(例如，如果 endIndex 是 -3，则是, strLength - 3)。  

返回值

返回一个从原字符串中提取出来的新字符串

示例

    var str1 = 'The morning is upon us.', // str1 的长度 length 是 23。str2 = str1.slice(1, 8),str3 = str1.slice(4, -2),str4 = str1.slice(12),str5 = str1.slice(30);console.log(str2); // 输出：he mornconsole.log(str3); // 输出：morning is upon uconsole.log(str4); // 输出：is upon us.console.log(str5); // 输出：""

5.区别

call()方法

<script>function F(a,b) {return a+b;}var obj = {};F.call(obj); // 让F执行，关键是我们如何给F传递参数F(1,2); // 我们自己调用F函数  并  传递参数console.log(F.call(obj,4,5)); // call方法里面可以有多个参数// 第个参数表示谁去借用这个方法   后面的参数都是给这个方法传递的参数
</script>

apply()方法

<script>// apply  和  call一模一样  唯一区别是传递参数的区别function F(a,b) {console.log("F...")return a+b;}var obj = {};console.log(F.apply(obj,[1,2])); // 让obj借用F函数
</script>

bind()方法

<script>// bind  绑定的意思// call 改变了this指向 并 让函数执行   传递参数一个个传递// apply 改变了this指向 并 让函数执行   传送参数必须是数组// bind  改变了this指向 函数不执行function F(a,b) {console.log("F...")return a+b;}var obj = {};let k = F.bind(obj)console.log(k(1, 2));;
</script>

小练习

问：什么情况下，让a可以等于1，也可以等于2，也可以等于3
方法一：

<script>let a = {n:0, // a对象的私有属性  1toString:function () {  // a对象有私有属性（方法）// console.log("这是自己的toSring...")// this  ==>  a     this.n      a.nreturn ++this.n;}}// 显示地调用  a.toString()console.log(a == 1)console.log(a == 2)console.log(a == 3)
</script>

方法二：

<script>let a = {n:0,toString:function () {return ++this.n;}}if(a==1 && a==2 && a==3){console.log("ok");}
</script>

方法三：

<script>let a = [1,2,3];// ....   shifta.toString = a.shift; // 你调用toString就相当于调用了shift// a==1  先调用a.toString  内部调用了if(a==1 && a==2 && a==3){console.log("ok");}
</script>