javascript中的隐式调用


Posted in Javascript onFebruary 10, 2018

前言

不知道用隐式调用来形容是否确切,其行为总是隐藏在背后,时不时出来露脸一下,作用貌似不大,但是了解一下还是有用处的,保不准在你的使用下大有作为。

所谓的隐式调用简单来说就是自动调用一些方法,而这些方法像钩子一样可以在外部修改,从而改变既定行为。
下面我会列举一些最近看到的隐式调用,例子都是点到即止,欢迎补充

数据类型转换 toSting 和 valueOf

var obj = {
   a: 1,
   toString: function () {
    console.log('toString')
    return '2'
   },
   valueOf: function () {
    console.log('valueOf')
    return 3
   }
  }
  console.log(obj == '2'); //依次输出 'valueOf' false
  console.log(String(obj));//依次输出 'toString' '2'
var obj = {
   a: 1,
   toString: function () {
    console.log('toString')
    return '2'
   },
   valueOf: function () {
    console.log('valueOf')
    return {} //修改为对象
   }
  }
  console.log(obj == '2'); //依次输出 'valueOf' 'toString' true
  console.log(Number(obj));//依次输出 'valueOf' 'toString' 2

在相等运算符的操作中,对象会先调用 valueOf 如果返回的值是一个对象, 就会调用 toSting, null除外,然后用返回的值进行比较,第一个例子 相当于 3 == '2' 输出 false, 第二个例子由于执行valueOf 返回的是一个对象, 然后执行 toString, 最后相当于 '2' == '2' 输出true在 Number 和 String 方法中 Number会先调用 valueOf, 后调用 toString, String方法中是相反的。

数据类型的转换除了上面的两个例子外,还存在在各种其他操作中,如数值运算,当涉及到引用类型时,都会调用valueOf 或 toString 方法,只要是对象都会继承这两个方法,我们可以重新覆盖这两个方法,从而影响数据类型转换的行为

DOM2事件中的 handleEvent

var eventObj = {
   a: 1,
   handleEvent: function (e) {
    console.log(this, e);//返回 eventObj 和 事件对象
    alert(this.a)
   }
  }
  document.addEventListener('click', eventObj)

你没有看错,addEventListener 第二个参数除了函数外还可以是一个对象, 事件触发后会执行对象的handleEvent方法,方法执行时的this指向eventObj, 你可以把想传入的数据绑定在eventObj对象上

JSON对象 toJSON

var Obj = {
   a: 10,
   toJSON: function () {
    return {
     a: 1,
     b: function () {
     },
     c: NaN,
     d: -Infinity,
     e: Infinity,
     f: /\d/,
     g: new Error(),
     h: new Date(),
     i: undefined,
     
    }
   }
  }
  console.log(JSON.stringify(Obj));
  //{"a":1,"c":null,"d":null,"e":null,"f":{},"g":{},"h":"2018-02-09T19:29:13.828Z"}

如果JSON的stringify方法传入的对象有toJSON方法,那么该方法执行的对象会转为toJSON执行后返回的对象,有一点要注意的是,如下面代码

var Obj1 = {
   a: 10,
   toJSON: function () {
    console.log(this === Obj1);//true
    return this
   }
  }
  console.log(JSON.stringify(Obj1));//{"a":10}
var Obj2 = {
   a: 10,
   toJSON: function () {
    console.log(this === Obj2);//true
    return {
     a: this
    }
   }
  }
  console.log(JSON.stringify(Obj2));//报错 Maximum call stack size exceeded

如果按上面的说法很明显报错是我们所预期的,但是当直接 return this 根本没有报错,不妨可以大胆猜测一下其内部对toJSON返回的对象和原对像进行比较,如果相等就直接使用原对象

promise对象的 then

var obj = {
   then: function (resolve, reject) {
    setTimeout(function () {
     resolve(1000);
    }, 1000)
   }
  }
  Promise.resolve(obj).then(function (data) {
   console.log(data);// 延迟1秒左右输出 1000
  })

当Promise.resolve方法传入对象时,如果存在 then 方法会立即执行then方法,相当于把方法放入new Promise中,除了Promise.resolve有这个行为外,Promise.all也有这个行为

var timePromise = function (time) {
    return new Promise(function (resolve) {
     setTimeout(function () {
      resolve(time);
     }, time)
    })
   }
   var timePromise1 = timePromise(1000);
   var timePromise2 = timePromise(2000);
   var timePromise3 = timePromise(3000);
   Array.prototype.then = function (resolve) {
     setTimeout(function () {
      resolve(4000);
     }, 4000)
    }
   Promise.all([timePromise1, timePromise2, timePromise3]).then(function (time) {
    console.log(time);// 等待4秒左右输出 4000
   })

对象属性存取器 get 和 set

var obj = {
    _age: 100,
    get age() {
     return this._age < 18 ? this._age : 18;
    },
    set age(value) {
     this._age = value;
     console.log(`年龄设置为${value}岁`);
    }
   }
   obj.age = 1000; //年龄设置为1000岁
   obj.age = 200; //年龄设置为200岁
   console.log(obj.age);// 18
   obj.age = 2; ////年龄设置为2岁
   console.log(obj.age); // 2

可以看到不管把年龄设置为多少,我的年龄都是18岁或以下的,当执行属性存取时实际上是调用对象属性相应的 get set函数,除了以上写法还有下面的写法

var input = document.createElement('input');
  var span = document.createElement('span');
  document.body.appendChild(input);
  document.body.appendChild(span);
  var obj = {
   _age:''
  }
  var obj = Object.defineProperty(obj, 'age', {
   get: function () {
    return this._age;
   },
   set: function (value) {
    this._age = value;
    input.value = value;
    span.innerHTML = value;
   }
  });
  input.onkeyup = function (e) {
   if (e.keyCode === 37 || e.keyCode === 39) {
    return;
   }
   obj.age = this.value
  }

现在input的value值和obj.age的属性值span的innerHTML值都绑定在一起了

遍历器接口 Symbol.iterator

var arr = [ 1, 2 , 3];
  arr[Symbol.iterator] = function () {
   const self = this;
   let index = 0;
   return {
    next () {
     if(index < self.length) {
      return {
       value: self[index] ** self[index++],
       done: false
      }
     } else {
      return {
       value: undefined,
       done: true
      }
     }
    }
   }
  }
  console.log([...arr, 4]);//返回 [1, 4, 27, 4]
  for(let value of arr) {
   console.log(value); //依次返回 1 4 27
  }

可以看到凡是调用扩展运算符,或者使用 for...of 循环遍历对象都会调用对象的遍历器接口,像Array,String,Map,Set,TypedArray还有一些类数组对象如arguments,NodeList原生具备了遍历器接口,而普通对象没有部署这个接口,如果要让对象能够使用扩展运算符或者for...of循环可以在对象上添加该方法,也可以在原来具备接口的对象上重写方法,从而改变其行为

最后

暂时就想到这么多,欢迎大家补充,同时感谢你对三水点靠木的支持。

Javascript 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
JavaScript 继承详解(四)
Jul 13 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 #Javascript
webpack之devtool详解
Feb 10 #Javascript
React组件refs的使用详解
Feb 09 #Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 #Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 #Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 #Javascript
JavaScript运行原理分析
Feb 09 #Javascript
You might like
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
javaScript基础详解
2017/01/19 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python的Tqdm模块的使用
2018/01/10 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
精选奢华:THE LIST
2019/09/05 全球购物
网吧收银员岗位职责
2013/12/14 职场文书
模具数控专业自荐信
2014/01/27 职场文书
六年级数学教学反思
2014/02/03 职场文书
合作意向书模板
2014/03/31 职场文书
环境卫生标语
2014/06/09 职场文书
婚宴邀请函
2015/01/30 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS