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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
简单实现JS计算器功能
Dec 21 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 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连mysql和oracle数据库性能比较
2006/10/09 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
python 数据加密代码
2008/12/24 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
应届生服务员求职信
2013/10/31 职场文书
文秘专业大学生求职信
2013/11/10 职场文书
自我评价范文
2013/12/22 职场文书
公司委托书范本
2014/04/04 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
原告代理词范文
2015/05/25 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书