你不知道的16个js原生函数和属性的区别

返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

Object.getOwnPropertyNames[4]

返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

Object.getOwnPropertySymbols[5]

一个给定对象自身的所有 Symbol 属性的数组。

Reflect.ownKeys[6]

返回一个由目标对象自身的属性键组成的数组。

等同于Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))

例子

const symbolSalary = Symbol.for(“salary”);

const symbolIsAnimal = Symbol.for(“isAnimal”);

const symbolSay = Symbol.for(“say”);

function Person(age, name){

this.age = age;

this.name = name;

this.walk = function () {

console.log(“person:walk”);

}

}

// 原型方法

Person.prototype.say = function(words){

console.log(“say:”, words);

}

Person.prototype[symbolSay] = function(words){

console.log(“symbolSay”, words);

}

// 原型属性

Person.prototype[symbolIsAnimal] = true;

Person.prototype.isAnimal = true;

const person = new Person(100, “程序员”);

person[symbolSalary] = 6000;

person[“sex”] = “男”;

// sex 不可枚举

Object.defineProperty(person, “sex”, {

enumerable: false

});

Object.defineProperty(person, symbolSalary, {

enumerable: false, // 无效的设置

value: 999

});

const keys = Object.keys(person);

const names = Object.getOwnPropertyNames(person);

const symbols = Object.getOwnPropertySymbols(person);

const ownKeys = Reflect.ownKeys(person);

console.log(“keys”, keys);  // [ ‘age’, ‘name’, ‘walk’ ]

console.log(“getOwnPropertyNames”, names); // [ ‘age’, ‘name’, ‘walk’, ‘sex’ ]

console.log(“getOwnPropertySymbols”, symbolSalary); // [ Symbol(salary) ]

console.log(“ownKeys”, ownKeys); // [ ‘age’, ‘name’, ‘walk’, ‘sex’, Symbol(salary) ]

console.log(“--------”)

console.log(person.isAnimal);  // true

console.log(person[symbolIsAnimal]); // true

console.log(person[symbolSalary]);  // 999

personsymbolSay; // symbolSay hello world

person.say(“hello world”); // say: hello world

person.walk(); // person:walk

复制代码

总结

1. Object.keys：则返回的是所有可枚举属性键，也就是属性下的enumerable: true。但不包括Symbol值作为名称的属性键。

2. Object.getOwnPropertyNames：返回的是对象所有自己的属性键 ，包括不可枚举属性但不包括Symbol值作为名称的属性键。

3. Object.getOwnPropertySymbols: 方法返回一个给定对象自身的所有 Symbol 属性键的数组。

4. Reflect.ownKeys: 返回一个由目标对象自身的属性键组成的数组。等同于Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))。

节点位置关系 Node.contains, Node.compareDocumentPosition

---

Node.compareDocumentPosition[7]

比较当前节点与任意文档中的另一个节点的位置关系

语法 compareMask = node.compareDocumentPosition( otherNode )

返回值是一个具有以下值的位掩码：

| 常量名 | 十进制值 | 含义 |

| — | — | — |

| DOCUMENT_POSITION_DISCONNECTED | 1 | 不在同一文档中 |

| DOCUMENT_POSITION_PRECEDING | 2 | otherNode在node之前 |

| DOCUMENT_POSITION_FOLLOWING | 4 | otherNode在node之后 |

| DOCUMENT_POSITION_CONTAINS | 8 | otherNode包含node |

| DOCUMENT_POSITION_CONTAINED_BY | 16 | otherNode被node包含 |

| DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC | 32 | 待定 |

在一些场景下，可能设置了不止一位比特值。比如 otherNode 在文档中是靠前的且包含了 Node, 那么DOCUMENT_POSITION_CONTAINS 和 DOCUMENT_POSITION_PRECEDING 位都会设置，所以结果会是 0x0A 即十进制下的 10。

看代码：

结果是：20

1. child 在 parent之后，赋值得4

2. child 被 parent包含，赋值的16

4 + 16 = 20

复制代码

Node.contains[8]

返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点

基本等于compareDocumentPosition的 | DOCUMENT_POSITION_CONTAINED_BY | 16 |otherNode被node包含 |

总结

1. compareDocumentPosition 返回的是数字，带组合意义的数据，不仅仅可以返回包含，还可以返回在之前之后等信息

2. contains 返回的是布尔值，仅仅告诉你是否有包含关系

取文本 innerText, textContent

---

HTMLElement.innerText[9]

解析过程：

1. 对HTML标签进行解析；

2. 对CSS样式进行带限制的解析和渲染；

3. 将ASCII实体转换为对应的字符；

4. 剔除格式信息（如\t、\r、\n等），将多个连续的空格合并为一个

Node.textContent[10]

解析过程：

1. 对HTML标签进行剔除；

2. 将ASCII实体转换为相应的字符。

需要注意的是：

1. 对HTML标签是剔除不是解析，也不会出现CSS解析和渲染的处理，因此<br/>等元素是不生效的。

2. 不会剔除格式信息和合并连续的空格，因此\t、\r、\n和连续的空格将生效

例子

Take a look at
how this text
is interpreted

below.

HIDDEN TEXT

Result of textContent:

...

Result of innerText:

...

复制代码

看看结果：

image.png

总结

1. innerText是会解析css的，<br/>有效，剔除格式信息（如\t、\r、\n等），将多个连续的空格合并为一个。

2. textContent是剔除html标签，<br/>无效，\t、\r、\n和连续的空格将生效。

节点取值 value , nodeValue

---

Node.nodeValue[11]

• 对于text, comment, 和 CDATA 节点来说, nodeValue返回该节点的文本内容.

• 对于 attribute 节点来说, 返回该属性的属性值.

对应着下面表格的 nodeType的值 text 3,4,8

| 常量 | nodeType 值 | 描述 |

| — | — | — |

| Node.ELEMENT_NODE | 1 | 一个 元素 节点，例如 |

和

|| Node.TEXT_NODE | 3 | Element 或者 Attr 中实际的 文字 || Node.CDATA_SECTION_NODE | 4 | 一个 CDATASection，例如 <!CDATA[[ … ]]>。|| Node.PROCESSING_INSTRUCTION_NODE | 7 | 一个用于XML文档的 ProcessingInstruction (en-US) ，例如 声明。|| Node.COMMENT_NODE | 8 | 一个 Comment 节点。|| Node.DOCUMENT_NODE | 9 | 一个 Document 节点。|| Node.DOCUMENT_TYPE_NODE | 10 | 描述文档类型的 DocumentType 节点。例如 就是用于 HTML5 的。|| Node.DOCUMENT_FRAGMENT_NODE | 11 | 一个 DocumentFragment 节点 |

value

特定的一些HTMLElement元素，用value属性获取其值。常见的有value属性的元素如下：

• HTMLInputElement[12] <input value="1" />

• HTMLTextAreaElement[13] <textarea value= "你哈" />

• HTMLButtonElement[14] <button value= "提交" />

• HTMLDataElement[15] <data value="21053">圣女果</data>

• HTMLSelectElement[16] <select><option value ="volvo">Volvo</option>

• HTMLOptionElement[17] <select><option value ="volvo">Volvo</option>

• HTMLParamElement[18]

    

复制代码

• HTMLProgressElement[19] <progress value="22" max="100"></progress>

总结

1. nodeValue 是文本节点，属性节点，注释节点等类型的节点用来取值的方法

2. vlaue是特定的元素节点用来取值的方法

节点复制 adoptNode, importNode, cloneNode

---

Document.adoptNode[20]

将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中.

Document.importNode[21]

从其他的document文档中获取一个节点。该节点以及它的子树上的所有节点都会从原文档删除 , 并且它的ownerDocument 属性会变成当前的document文档。之后你可以把这个节点插入到当前文档中。

Node.cloneNode[22]

生成节点的一个副本。

实际上 Document 是继承自 Node， 也具备cloneNode方法。

这里提一个问题：

Document.adoptNode与Document.importNode是操作外部文档的，那么操作所在的文档会有什么效果呢？

Node.cloneNode 有一个boolean类型的可选参数deep：

• true: 则该节点的所有后代节点也都会被克隆

• false: 则只克隆该节点本身.

注意

1. cloneNode deep参数在不同版本的浏览器实现中，默认值可能不一样， 所以强烈建议写上值。

2. cloneNode 会克隆一个元素节点会拷贝它所有的属性以及属性值,当然也就包括了属性上绑定的事件(比如οnclick=“alert(1)”),但不会拷贝那些使用addEventListener()方法或者node.onclick = fn这种用JavaScript动态绑定的事件

总结

1. adoptNode 从外部文档进行拷贝

2. importNode 从外部文档进行拷贝，并从外部文档删除

3. cloneNode 从本文档进行复制，有浅复制和深复制

父节点 childNodes , children

---

Node.childNodes[23]

节点的子节点集合，包括元素节点、文本节点还有属性节点

ParentNode.children[24]

返回的只是节点的元素节点集合, 即 nodeType为1的节点。

例子

来实际看一段代码：

1

2

3

<!CDATA[[ 4 ]]>

复制代码

返回结果截图：

Node.parentNode与Node.parentElement也是同样的道理。

总结

1. children只返回元素节点，也就是 nodeType为1的节点

2. childNodes 返回所有类型的节点

添加节点 append, appendChild

---

node.appendChild[25]

将一个节点附加到指定父节点的子节点列表的末尾处

ParentNode.append[26]

方法在 ParentNode的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。被插入的 DOMString 对象等价为 Text 节点.

例子

我们一次append三个节点，其中两个文本节点，一个div节点。

复制代码

image.png

总结

• ParentNode.append()允许追加 DOMString 对象，而 Node.appendChild() 只接受 Node 对象。

• ParentNode.append() 没有返回值，而 Node.appendChild() 返回追加的 Node 对象。

• ParentNode.append() 可以追加多个节点和字符串，而 Node.appendChild() 只能追加一个节点。

简直说， append强大太多了。

文档可见状态 Document.hidden, Document.visibilityState

---

document.hidden[27]

返回布尔值，表示页面是（true）否（false）隐藏。

Document.visibilityState[28]

返回document的可见性, 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：

• ‘visible’ : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.

• ‘hidden’ : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’ .

• ‘prerender’ : 页面此时正在渲染中, 因此是不可见的 . 文档只能从此状态开始，永远不能从其他值变为此状态 .注意: 浏览器支持是可选的.

当此属性的值改变时, 会递交 visibilitychange 事件给Document.

例子

我们先输出当前状态，然后点击别的tab,等下再点击回来。

console.log(

“visibilityState:”,

document.visibilityState,

" hidden:",

document.hidden,

);

console.log(“”);

document.addEventListener(“visibilitychange”, function () {

console.log(

“visibilityState:”,

document.visibilityState,

" hidden:",

document.hidden

);

});

复制代码

image.png

我们日常可以用visibilitychange来监听当前页面处于隐藏时，去清除定时器或页面中的动画, 停止音乐视频等的播放。

我还想到一个有意思的

1. 广告倒计时

你离开后，不算倒计时，会不会被骂死

1. 阅读某些协议

你离开后，停止倒计时

总结

1. hidden 与 visibilityState 返回值不同，一个是布尔值，一个是字符串

2. visibilityState 的状态多一种 prerender, 其对应的hidden的值是true

3. visibilityState e有相关的事件

函数调用 call, apply, bind

---

Function.prototype.call[29]

使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数

Function.prototype.apply[30]

调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数

Function.prototype.bind[31]

方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用

例子

function sum(…args) {

const total = args.reduce((s, cur) => {

return s + cur;

}, 0);

return (this.base || 0) + total;

}

const context = {

base: 1000

};

const bindFun = sum.bind(context, 1, 2);

const callResult = sum.call(context, 1, 2, 3, 4);

const applyResult = sum.apply(context, [1, 2, 3, 4]);

const bindResult = bindFun(3, 4);

console.log(“call:”, callResult);  // 1010

console.log(“apply:”, applyResult); // 1010

console.log(“bind:”, bindResult); // 1010

复制代码

总结

相同点，都能改变被调用函数的this指向。

1. call: 第二个参数开始，可以接收任意个参数

2. apply: 第二个参数，必须是数组或者类数组

3. bind: 第二个参数开始，可以接收任意个参数 , 返回的是一个新的函数

注意点：

1. bind调用多次，this指向第一次第一个参数

log 调用了两次bind, 第一次bind{ val: 1 }, 第二次bind{ val: 2 }, 输出的this是一次bind的上下文

function log() {

console.log(“this”, this);

}

console.log(log.bind({ val: 1 }).bind({ val: 2 })())  // { val: 1 }

复制代码

再看一段类似的代码：

虽然this的指向不会再变改变，但是参数还是继续接受， arguments 长度为2， 第一次bind的1，第二次bind的 2 , 都照单全收。

function log() {

console.log(“this”, this);   // { val: 1 }

console.log(“arguments”, arguments);  // { ‘0’: 1, ‘1’: 2 }

}

console.log(log.bind({ val: 1 }, 1).bind({ val: 2 }, 2)())  // 1

复制代码

字符串截取 substr, substring

---