Symbol.hasInstance

本案例是结合阮一峰老师的ECMAScript 6 入门丛书进一步的详细介绍,和对Symbol.hasInstance的理解。本着互联网的精神,分享给大家。

  对象的Symbol.hasInstance属性,指向一个内部方法。当其他对象使用instanceof运算符,判断是否为该对象的实例时,会调用这个方法。比如,foo instanceof Foo在语言内部,实际调用的是Foo[Symbol.hasInstance](foo)。

  代码示例:证明x确实是MyClass的实例。

class MyClass {

}
var x = new MyClass()
console.log(x instanceof MyClass); // true
console.log(MyClass[Symbol.hasInstance](x));//true

  下面的示例是阮一峰老师在ECMAScript 6 入门丛书中的案例,我个人理解为是重写了 Even[Symbol.hasInstance]的静态方法。

  代码示例:

class Even {
static [Symbol.hasInstance](obj) {
return Number(obj) % 2 === 0;
}
}
x = new Even()
console.log(1 instanceof Even);//false
console.log(2 instanceof Even);//true
console.log(x instanceof Even);//true 原本判断x是否为Even的实例的方法,被改成了传入的数字%2===0。所以此刻是false。

   MyClass是一个类,new MyClass()会返回一个实例。该实例的Symbol.hasInstance方法,会在进行instanceof运算时自动调用,判断左侧的运算子是否为Array的实例。

  代码示例:这里相当于是修改了MyClass[Symbol.hasInstance]的动态方法

class MyClass {
[Symbol.hasInstance](foo) {
return foo instanceof Array;
}
}
var x = new MyClass()
console.log([1, 2, 3] instanceof new MyClass()); // true
console.log(x[Symbol.hasInstance]([0, 0, 0,]));//true

   在举一个完整的例子。

class MyClass {
[Symbol.hasInstance](foo) {
return foo instanceof Array;
} static [Symbol.hasInstance](obj) {
return Number(obj) % 2 === 0;
}
}
var x = new MyClass()
console.log([1, 2, 3] instanceof new MyClass()); // true //我是调用的动态方法
console.log(x[Symbol.hasInstance]([0, 0, 0,]));//true //我是调用的动态方法
console.log(2 instanceof MyClass); //true 我是调用静态方法
console.log(MyClass[Symbol.hasInstance](2));//true 我是调用了静态方法
console.log(x instanceof MyClass); //false 因为修改了静态方法。x本身就是MyClass的实例,如果注释了静态方法就会返回true。

JavaScript ES6 Symbol.hasInstance的理解。的更多相关文章

  1. JavaScript es6 class类的理解。

    本着互联网的分享精神,在本篇文章我将会把我对JavaScript  es6 class类的理解分享给大家. JavaScript 类主要是 JavaScript 现有的基于原型的继承的语法糖. 类语法 ...

  2. JavaScript ES6 promiss的理解。

    本着互联网的分享精神,我将我对promise的理解分享给大家. JavaScript ES6的promise方法主要应用在处理异步函数返回的结果,注意他不是将异步函数转换为同步函数,而是等异步函数有结 ...

  3. [每日一题]面试官问:谈谈你对ES6的proxy的理解?

    [每日一题]面试官问:谈谈你对ES6的proxy的理解? 关注「松宝写代码」,精选好文,每日一题 作者:saucxs | songEagle 一.前言 2020.12.23 日刚立的 flag,每日一 ...

  4. ES6之let(理解闭包)和const命令

    ES6之let(理解闭包)和const命令 最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉.因此购买了阮一峰老师的ES6标准入门,在此感谢阮一峰老师的著作. 我们知道,E ...

  5. JavaScript ES6中,export与export default

    自述: 本来是对new Vue()和export default比较懵的,查了一下,发现我理解错了两者的关系,也没意识到export与export default的区别,先简单的记录一下基本概念,后续 ...

  6. JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...

  7. JavaScript局部变量和全局变量的理解

    原文链接:http://www.cnblogs.com/eric-qin/p/4166552.html JavaScript局部变量和全局变量的理解   1 2 3 4 5 6 7 8 9 10 &l ...

  8. JavaScript 应用开发 #1:理解模型与集合

    在 < Backbone 应用实例 > 这个课程里面,我们会一起用 JavaScript 做一个小应用,它可以管理任务列表,应用可以创建新任务,编辑还有删除任务等等.这个实例非常好的演示了 ...

  9. [转]JavaScript ES6 class指南

    [转]JavaScript ES6 class指南 前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建 ...

随机推荐

  1. 解决ie img标签内存泄漏

    代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...

  2. Could NOT find PythonLibs (missing: PYTHON_LIBRARIES PYTHON_INCLUDE_DIRS)

    问题: Could NOT find PythonLibs (missing: PYTHON_LIBRARIES PYTHON_INCLUDE_DIRS) 解决: cmake -DPYTHON_INC ...

  3. python--变量,常量,用户交互

    1.变量 概念:把程序运行过程中产生的中间值保存在内存,方便后面使用 命名规范: 1.字母,数字,下划线组成 2.不能用数字开头,且不能用纯数字 3.不能用python关键字 4.不要用中文 5.要有 ...

  4. Android 的学习心得

    https://www.jianshu.com/p/f93a6c75940c    一个2年安卓开发者的一些经验分享

  5. idea IDE 导入的项目没有显示目录结构

    解决方法:1.关闭 idea 2.删除该项目录下的 .idea 文件 3.重新 open 项目

  6. 2018 ACM-ICPC 亚洲区域赛北京现场赛 I题 Palindromes

    做法:打表找规律 大数是过不了这个题的(但可以用来打表) 先找k的前缀,前缀对应边缘数字是哪个 如果第0位是2-9 对应奇数长度的1-8 第0位为1时,第1位为0时对应奇数长度的9,为1-9时对应偶数 ...

  7. rpm 卸载

    卸载:python-urlgrabber-3.9.1-9.el6.noarch rpm -e python-urlgrabber-3.9.1-9.el6.noarch

  8. 在macro中怎么接着使用一些库?(遇到的例子:current_user)

    这回是用的stackoverflow http://stackoverflow.com/questions/26339583/ 在调用模板html的时候 写上一个 with context 整体效果 ...

  9. [ActionScript 3.0] as3启动QQ

    import flash.html.HTMLLoader; import flash.net.URLLoader; import flash.net.URLRequest; import flash. ...

  10. the type initializer for 'system.drawingcore.gdiplus' threw an exception

    Centos 7 yum install libgdiplus-devel reboot之后生效 apt install libgdiplus cp /usr/lib/libgdiplus.so ~/ ...