JS apply/call/bind 及 实用技巧

JS apply/call/bind

标签（空格分隔）： 未分类

---

function aa(){
    xxx.call(this,...) // 改变作用域
}

改变函数的 xxx 构造函数的 this 作用域，指向 aa 的作用域，此时 aa 具有了 xxx 构造函数的属性；

如果在 xxx 和 aa 都有某个同名属性，最后的加载的属性会被赋值
为什么呢？
解释： xxx.call/apply/bind 把作用域挂载到当前作用域

省第一个参数，默认指向了 windows

---

实用技巧：文章最后面罗列了，React 内的操作技巧

1. apply 参数是数组，使用后立即执行

function F(){}
f = {}
F.apply(f,arguments)

2.call 参数是依次填入进去，使用后立即执行

function F(）{}
f={}
F.call(f,arg1,arg2,....)

call、apply 的第一个参数省略：
省略 this 参数，该对象指向的是 window (即被window给继承属性)；代码如下：

window.a = "window.a"
function A(){
    this.a = "A().a"
}
function B(){
    console.log(' * * * start B() * * * ')
    A.call(this)
}
function C(){
    console.log(' * * * start C() * * * ')
    A.call()
}

var bb = new B()
console.log(bb.a)  // "A().a" 
console.log(window.a) // "window.a"

// ----  先执行 C,防止 B 的window.a 会被污染 ------
var cc = new C()
console.log(cc.a)  // undefined
console.log(window.a) // "A().a"

3.bind 参数是依次填入(和call一样)，使用后不会立即调用，自由调用

function F(）{}
f = {}
f1 = F.bind(f, arg1, arg2,...)
f1()  // 这样才会调用

---

实用技巧：

1. 类型转换

[].xxx.call(xx,function(d){…})
express 4.2 源码： [].slice.call(arguments,1) ==等价于== arguments.slice(1)

思考：为什么要这么做呢???

保证参数输入是一个数组！！！
由于参数的类型不定，如果是非数字的话，用 [].slice.call 把可以把参数强制性的转成 数组，再切片。

技术扩展

这样写，在 React 里，数据遍历生成 dom 节点时，就不用再做判断了

[].map.call(arguments[1],function(d){
    console.log(d);
})
[].forEach.call(arguments[1],function(d){
    console.log(d);
})

React 组件内的节点渲染

# 这样做的好处，就不用在做 输入判断，  aa && aa instanceof Array && aa.map(function(d){...})
aa && [].map.call(aa,function(d){
    return (
        <li key={aa.indexOf(d)}>{d}</li>
    )
})

2.类型判断

判断 typeof xx 为Object 时，显示 xx 具体的类型

Object.prototype.toString.call(xx)  // [Object xx]  

参考文章：https://bonsaiden.github.io/JavaScript-Garden/zh/#types.typeof

只检测 对象里的具体类型 ======== 补充 typoof 的判断

Object.prototype.toString.call([])  //  "[object Array]"
Object.prototype.toString.call( null )  // "[object Null]"