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字典探测用户名工具
Oct 05 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
微信小程序实现左右列表联动
May 19 Javascript
js逆向解密之网络爬虫
May 30 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
javascript实现前端成语点击验证优化
Jun 24 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获取url参数方法总结
2014/11/13 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
python绘制简单彩虹图
2018/11/19 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
Python如何存储数据到json文件
2020/03/09 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
编码实现字符串转整型的函数
2012/06/02 面试题
自学考试自我鉴定范文
2013/09/26 职场文书
统计员岗位职责
2013/11/14 职场文书
草船借箭教学反思
2014/02/03 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
出生证明范本
2015/06/15 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python