JS apply/call/bind 及 实用技巧
来源:互联网 发布:歌曲变成伴奏软件 编辑:程序博客网 时间:2024/05/21 00:55
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) // undefinedconsole.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]"
阅读全文
1 0
- JS apply/call/bind 及 实用技巧
- JS call bind apply
- prototype.js之bind及js apply call用法
- JS之apply、call、bind
- 【面向JS--apply、call、bind】
- js进阶(一)bind和call及apply
- js中的apply/call/caller/callee/bind
- !!js中call、apply、bind的用法
- js function call,apply,bind方法
- js中call、apply、bind的用法
- JS中的call、apply、bind方法
- JS中的call、apply、bind方法
- JS中的call、apply、bind方法
- apply, call, bind在js中的区别
- JS中call、apply、bind使用指南
- JS中apply call bind的区别
- JS中的call、apply、bind方法详解
- JS中call、apply、bind大概区别
- 访问控制的原因
- Spring Boot:安装命令行界面Spring boot CLI
- SSIS缓慢变化维理解及简单操作
- C语言入门第九篇,循环语句
- MD5,RSA与springCode的加解密方法
- JS apply/call/bind 及 实用技巧
- 深入理解Java:注解(Annotation)--注解处理器
- 一个例子说明数据库union all的作用
- canvas 与 svg 的区别
- 数据结构线性表之不定长顺序表
- Oracle Web ADI 加载时错误:ORA-06508: PL/SQL: 无法在调用之前找到程序单元
- java前后台开发这三年
- jenkins pipeline中拉取代码(svn或git)
- Java基础