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. LOJ#6038. 「雅礼集训 2017 Day5」远行(LCT)

    题面 传送门 题解 要不是因为数组版的\(LCT\)跑得实在太慢我至于去学指针版的么--而且指针版的完全看不懂啊-- 首先有两个结论 1.与一个点距离最大的点为任意一条直径的两个端点之一 2.两棵树之 ...

  2. CF1110G Tree-Tac-Toe(博弈论)

    题面 传送门 题解 博弈论的前提是双方都是绝顶聪明的人 所以这种题目显然不是我应该做的 题解 //minamoto #include<bits/stdc++.h> #define R re ...

  3. setInterval(),setTimeout(),location.reload(true)

    1,setInterval() setInterval()方法可以按照指定的周期来调用函数或表达式,他会不停地调用函数,直到调用clearInterval()方法或窗口关闭.由setInterval( ...

  4. Requests Header | Http Header

    Requests Header | Http Header Header 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html Accep ...

  5. OWASP JUICE SHOP部分题解

    本文作者:S0u1 0×00 简介 OWASP JUICE SHOP是一个开源的web应用靶场,里面包含了共记47个漏洞挑战任务,囊括了OWASP TOP 10的各个点,是一个很不错的渗透测试练手项目 ...

  6. 简单列举几种常用 FTP

    简单说下几种FTP FTP:文件传输协议(File Transfer Protocol,FTP) SFTP:OPENSSH 提供的隧道级文件传送(file transfer) FTPS:支持传输层安全 ...

  7. declare命令

    还是围绕以下几个问题进行学习; 1.declare是什么? 2.问什么要用declare? 3.怎样使用declare? 1.declare是什么? ♦declare应用的很多,向我们各种语言都会有声 ...

  8. 2016级算法第六次上机-E.Bamboo之吃我一拳

    Bamboo之吃我一拳 分析 当两个点的距离<=d时,才可以出拳,想要使得满足出拳条件的点对最少但不为0 寻找最近点对距离,得到的最近距离能够使得可以出拳的组数最少,因为除了最近点对外其他组合均 ...

  9. phpStudy mysql升级至5.7

    1.先停止mysql服务,卸载原来的mysql (其他菜单-->服务器管理--->MySQL--->卸载服务) 2.下载MySQL你需要的版本 ZIP Archive 版本 3.解压 ...

  10. 转 在子线程中new Handler报错--Can't create handler inside thread that has not called Looper.prepare()

    在子线程中new一个Handler为什么会报以下错误? java.lang.RuntimeException:  Can't create handler inside thread that has ...