原生JS:delete、in、typeof、instanceof、void详解

delete、in、typeof、instanceof、void详解

本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)

delete

delete 运算符用来删除对象的自有属性.

语法:delete expression

  • expression 的计算结果应该是一个对象的属性引用,如果不是一个对象的属性引用,那么,delete不会起任何作用,直接返回true。
  • 严格模式中,如果属性是一个不可配置(non-configurable)属性,删除时会抛出异常,非严格模式下返回 false。其他情况都返回 true。
  • delete 操作符与直接释放内存(只能通过解除引用来间接释放)没有关系。可查看内存管理页面。
  • 可以使用 delete 操作符来删除一个隐式声明的全局变量,也就是没有使用 var 定义的全局变量
  • 如果 delete 操作符删除成功,则被删除的属性将从所属的对象上彻底消失。然后,如果该对象的原型链上有一个同名属性,则该对象会从原型链上继承该同名属性

删除属性后,属性将从所属的对象上彻底消失,而删除数组元素后,会在数组内留下一个空洞,读取它的值将为undefined,数组长度不变;

delete无法删除:尝试删除无法删除的属性返回false,若删除成功或删除操作不起作用时均返回true

1、内置核心、客户端属性不能删除;

2、用户通过var语句声明的变量不能删除;

3、通过function语句定义的函数和函数参数也不能删除

4、不可配置的属性无法删除

5、不能删除继承来属性,不过可以从原型上直接删掉它

6、有一个例外:eval内的显示声明的属性可以被删除!eval(‘var a = 1‘)

  1. function foo(){
  2. delete x;
  3. let x;
  4. }

inhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/in

语法:prop in objectName

  • prop 一个字符串类型或者symbol类型的属性名,或者数组索引。
  • objectName 需要检测的对象(必须是一个对象,不能是原始类型)比如,可以是一个String包装对象,但不能是一个字符串原始值。
  • 它会遍历objectName的所有属性(含继承属性、键为 Symbols  类型的属性)
  • 如果你使用 delete 运算符删除了一个属性,则 in 运算符对所删除属性返回 false
  • 如果你只是将一个属性的值赋值为 undefined,而没有用 delete 删除它,则 in 运算仍然会返回true。
  • 如果一个属性是从原型链上继承来的,in 运算符也会返回 true。

typeof

typeof 运算符用来判断给定对象的类型.

语法:typeof operand

  • operand 是一个表达式,表示对象或原始值,其类型将被返回。返回一个字符串,指示未经计算的操作数的类型
  • operand无论引用的是什么类型的对象,只要带引用,它都返回 "object"
  • 在 JavaScript 最初的实现中,JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是0。由于 null 代表的是空指针(大多数平台下值为0x00),因此,null的类型标签也成为了0,typeof null就错误的返回了"object"。在ES6中仍然未被修复
  • 对正则表达式字面量的类型判断在某些浏览器中不符合标准:
  1. typeof /s/ === ‘function‘; // Chrome 1-12 , 不符合 ECMAScript 5.1
  2. typeof /s/ === ‘object‘; // Firefox 5+ , 符合 ECMAScript 5.1
  • 在 IE 6, 7 和 8 中,大多数的宿主对象是对象,而不是函数,例如:typeof alert === ‘object‘

typeof 可能的返回值:


类型


结果


Undefined


"undefined"


Null (引用了空指针)


"object" (见下方)


Boolean字面量


"boolean"


Number字面量


"number"


String字面量


"string"


Symbol (ECMAScript 6 新增)


"symbol"


宿主对象(由JS环境提供)


Implementation-dependent


函数对象 ( [[Call]] 在ECMA-262条款中实现了)


"function"


任何其他对象(带引用)


"object"

instanceof

语法:obj instanceof constructor

  • instanceof 运算符判断一个对象是否是另一个对象的实例。返回true或false
  • instanceof 运算符用来检测 constructor.prototype 是否存在于参数 obj 的原型链上(或者说:检测obj的原型链上是否存在constructor.prototype )
  1. // 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
  2. function Aoo(){}
  3. function Foo(){}
  4. Foo.prototype = new Aoo();//JavaScript 原型继承
  5. var foo = new Foo();
  6. console.log(foo instanceof Foo)//true
  7. console.log(foo instanceof Aoo)//true
  • 需要注意的是,如果表达式 obj instanceof Foo 返回true,则并不意味着该表达式会永远返回ture,因为Foo.prototype属性的值有可能会改变,改变之后的值很有可能不存在于obj的原型链上,这时原表达式的值就会成为false。
  • 另外一种情况下,原表达式的值也会改变,就是改变对象obj的原型链的情况,虽然在目前的ES规范中,我们只能读取对象的原型而不能改变它,但借助于非标准的__proto__魔法属性,是可以实现的。比如执行obj.__proto__ = {}之后,obj instanceof Foo就会返回false了。

void

它会对给定的表达式进行求值,然后直接返回 undefined

语法:void expression

  • void 运算符通常只用于获取 undefined 的原始值,一般使用 void(0)(等同于 void 0)
  • 在使用立即执行的函数表达式时,可以利用 void 运算符让 JavaScript 引擎把一个函数识别成函数表达式而不是函数声明(语句)。效果等同于给整个函数加个‘( )‘
  1. void function foo() {
  2. var a =1;
  3. var biz = function () {return a;};
  4. biz();
  5. }();
  • 当用户点击一个以 javascript: URI 时,浏览器会对冒号后面的代码进行求值,然后把求值的结果显示在页面上,这时页面基本上是一大片空白,这通常不是我们想要的。只有当这段代码的求值结果是 undefined 的时候,浏览器才不会去做这件傻事,所以我们经常会用 void 运算符来实现这个需求。虽然这么做是可行的,但利用 javascript: 伪协议来执行 JavaScript 代码是不推荐的,像下面这样:
  1. <a href="javascript:void(0);">
  2. 这个链接点击之后不会做任何事情,如果去掉 void(),
  3. 点击之后整个页面会被替换成一个字符 0。
  4. </a>
  5. <a href="javascript:void(document.body.style.backgroundColor=‘green‘);">
  6. 点击这个链接会让页面背景变成绿色。
  7. </a>
时间: 2024-11-05 15:51:08

原生JS:delete、in、typeof、instanceof、void详解的相关文章

原生JS获取元素宽高实践详解

开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排查出是获取元素高度那里出了问题,这个问题记忆在书上或视频中看到过,许久没用,用的时候就想当然了.遂决定深入剖析用法,增加记忆,记录发表出来,也能给各位前端同行.求学者增加印象. 出错之处 秉承结构.样式.行为分离的宗旨,每次不管大小案例都是分开写html.css.js.这也算抛砖引出了我犯错的玉. 原css

C语言中void*详解及应用

void在英文中作为名词的解释为"空虚:空间:空隙":而在C语言中,void为"无类型",相应的void *为"无类型指针".void似乎只有"注释"和限制程序的作用,当然,这里的"注释"不是为我们人提供注释,而是为编译器提供一种所谓的注释. 本文地址:http://www.cnblogs.com/archimedes/p/c-void-point.html,转载请注明源地址. void的作用: 1.对函数

最详尽的 JS 原型与原型链终极详解,没有「可能是」。(一)

最详尽的 JS 原型与原型链终极详解,没有「可能是」.(一) 第二篇已更新,点击进入第三篇已更新,点击进入 原文地址:https://www.cnblogs.com/hfultrastrong/p/9928235.html

JS表格组件神器bootstrap table详解(基础版)

这篇文章主要介绍了JS表格组件神器bootstrap table,bootstrap table界面采用扁平化的风格,用户体验比较好,更好兼容各种客户端,需要了解更多bootstrap table的朋友可以参考下 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用.

void与void*详解

void关键字的使用规则: 1. 如果函数没有返回值,那么应声明为void类型: 2. 如果函数无参数,那么应声明其参数为void: 3. 如果函数的参数可以是任意类型指针,那么应声明其参数为void * : 4. void不能代表一个真实的变量: void体现了一种抽象,这个世界上的变量都是“有类型”的 #########################################################################1.概述 许多初学者对C/C++语言中的voi

angular.fullpage.js指令的使用方法(详解)

接之前,jquery.fullpage在angular单页应用中存在重复初始化,分页器加倍问题,索性直接找到了angular.fullpage.js全屏滚动指令应用 angular-fullpage文档这里(将的不仔细自己做有点麻烦,不过有个demo) demo的却也不好看,直接上代码详解 1.首先得引用文件(当然angular.js必须的,省略) 2.导入angular.module内(fullPage.js放入,其他可以忽略自己用到的) 3. angular单页路由配置 state中加入(c

vue.js基础知识篇(6):组件详解

第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 Vue.js的组件注册分为全局注册和局部注册. 全局注册使用Vue.component方法.第一个参数是组件名字,第二个参数是组件的构造函数,要么是function,要么是object. <!DOCTYPE html> <html lang="en"> <hea

Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递

[TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LESS.SASS 或 JavaScript |-- components // 用于自己编写的Vue组件,比如滚动组件,日历组件,分页组件 |-- layouts // 布局目录,用于组织应用的布局组件,不可更改. |-- middleware // 用于存放中间件 |-- pages // 用于存放

indexOf、instanceOf、typeOf、valueOf详解

1.indexOf() 该方法用来返回某个指定的字符串值在字符串中首次出现的位置. 语法:indexOf(searchvalue,fromindex);两个参数,参数一表示查询的字符串值,参数二可选表示开始查询的起始位置,若不写默认从首字符开始查询 1 var string = "abcdeADhu390u09"; 2 console.log(string.indexOf("d"));//3 注意下标值从0开始 3 console.log(string.indexO