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]

参考文章：

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

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