call、apply、bind使用和区别
<h4>call、apply、bind使用和区别</h4>
<p>文章链接：<a href="https://juejin.im/post/5a9640335188257a7924d5ef">https://juejin.im/post/5a9640335188257a7924d5ef</a></p>
<p><strong>问题:怎么利用call、apply来求数组中的最大或者最小值</strong></p>
<h6>解决思路：在于参数的区别：call()第二个参数以参数列表的形式展现，apply则把除了上下文对象的参数放在一个数组里面，当做第二个参数</h6>
<hr />
<pre><code class="language-javascript">let arr1 = [1,2,3,4,5,6];
//求数组中的最大值
Math.max.call(null,1,2,3,4,5,6);//6
Math.max.apply(null,arr1);//6 直接传arr1传递进去
//例二
function fn() {
console.log(this);
}
// apply方法结果同下
fn.call(); // 普通模式下this是window，在严格模式下this是undefined
fn.call(null); // 普通模式下this是window，在严格模式下this是null
fn.call(undefined); // 普通模式下this是window，在严格模式下this是undefined
</code></pre>
<h5>问题二：如何利用call、apply来做继承</h5>
<pre><code class="language-javascript">function Peason(name)
{
this.name = name;
this.age = age;
this.showName = function(){
console.log(this.name)
}
}
function Cat(name){
Peason.call(this,name)
}
var cat = new Cat('Judy');
cat.showName();//'Judy'
//多继承
function Class1(a,b) {
this.showclass1 = function(a,b) {
console.log(`class1: ${a},${b}`);
}
}
function Class2(a,b) {
this.showclass2 = function(a,b) {
console.log(`class2: ${a},${b}`);
}
}
function Class3(a,b,c) {
Class1.call(this);
Class2.call(this);
}
let arr10 = [2,2];
let demo = new Class3();
demo.showclass1.call(this,1); // class1: 1,undefined
demo.showclass1.call(this,1,2); // class1: 1,1
demo.showclass2.apply(this,arr10); // class2: 2,2</code></pre>
<h5>问题三：pply、call、bind的区别和主要应用场景</h5>
<pre><code class="language-javascript">//arguments
function fn10() {
return Array.prototype.slice.call(arguments);
}
console.log(fn10(1,2,3,4,5)); // [1, 2, 3, 4, 5]
//含有length的属性对象
let obj4 = {
0: 1,
1: 'thomas',
2: 13,
length: 3 // 一定要有length属性
};
console.log(Array.prototype.slice.call(obj4));
// [1, "thomas", 13]
**ES6**
Array.of(obj4)//[1, "thomas", 13]
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
</code></pre>
<p><strong> 应用场景 —— 数组拼接 </strong></p>
<pre><code class="language-javascript">let arr1 = [1,2,3];
let arr2 = [4,5,6];
//数组的concat方法：返回一个新的数组
let arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3] 不变
console.log(arr2); // [4, 5, 6] 不变
// 用 apply方法
[].push.apply(arr1,arr2); // 给arr1添加arr2
console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(arr2); // 不变</code></pre>
<p><strong> 应用场景 —— 判断变量类型 </strong></p>
<pre><code class="language-javascript">let arr1 = [1,3,4];
let a = 'hahaha';
let b = 1;
let c = {name:'judy'};
let d = 'null'
let e = null
let f = 0
//用函数判断数组
function isArray(obj){
return Object.prototype.toString.call(obj) ==='[object Array]';
}
console.log(typeof d) //"string"
console.log(isNaN(d)) //true
console.log(Object.is(d,e))//false 它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。
console.log(Object.prototype.toString.call(arr1)) //"[object Array]"
console.log(Object.prototype.toString.call(a))//"[object String]"
console.log(Object.prototype.toString.call(b))//"[object Number]"
console.log(Object.prototype.toString.call(c))//"[object Object]"
console.log(Object.prototype.toString.call(d))//"[object String]"
console.log(Object.prototype.toString.call(e))//"[object Null]"
console.log(Object.prototype.toString.call(f))//"[object Number]"</code></pre>