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 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
Vuex中的State使用介绍
Jan 19 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP5 字符串处理函数大全
2010/03/23 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
jQuery实现聊天对话框
2020/02/08 jQuery
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
python生成二维码的实例详解
2017/10/29 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
教师爱岗敬业演讲稿
2014/05/05 职场文书
装修公司管理制度
2015/08/05 职场文书
消防安全培训工作总结
2015/10/23 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
Rust中的Struct使用示例详解
2022/08/14 Javascript