for in 和 for of 的区别

for in 和 for of 的区别

一句话总结：for ... in是为遍历对象属性而构建的，遍历的是 index，而 for ... of是为了遍历数组的，遍历的是 value

const arobj = { 100: 1,

d: 2, a: 9,

1: 3, 5: 99,

b: 8 };

Object.prototype.fun = () => {};

arobj.name = "lallala"

const arr = [1, 2, 4, 8, 9, 10] Array.prototype.method = () => {};

arr.name = "bababa";

for (const item in arobj) { console.log(arobj[item]) // 3 99 1 2 9 8 lallala () => {}

} for (const item in arr) {

console.log(item) //0 1 2 3 4 5 name method fun }

for (const item of arobj) { console.log(item) // Uncaught TypeError: arobj is not iterable

} for (const item of arr) {

console.log(item) // 1 2 4 8 9 10 }

一、for … in

1. for … in 适合遍历对象，遍历数组的时候会出现奇奇怪怪的问题
2. for … in 遍历会遍历所有的可枚举属性，包括原型链上的，可以使用 hasOwnProperty 来过滤
3. for … in 中 index 索引为字符串型数字，不能直接进行几何运算

二、for … of

1. 适合比遍历所有拥有迭代器的对象的集合

原型和原型链

实例是类的具象化产品

对象是一个具有多种属性的内容结构

实例都是对象，对象不一定是实例（如Object.prototype是对象但不是实例），构造函数也是对象

Function.__proto__=== Function.prototype;

//true

Function构造函数的prototype和proto属性都指向同一个原型，是否可以说Function对象是由Function构造函数创建的一个实例？

Yes and No.

Yes 的部分：按照JS中“实例”的定义，a 是 b 的实例即 a instanceof b 为 true，默认判断条件就是 b.prototype 在 a 的原型链上。而 Function instanceof Function 为 true，本质上即 Object.getPrototypeOf(Function) ===

Function.prototype，正符合此定义。

No 的部分：

Function 是 built-in 的对象，也就是并不存在“Function对象由Function构造函数创建”这样显然会造成鸡生蛋蛋生鸡的问题。实际上，当直接写一个函数时（如 function f() {} 或 x => x），也不存在调用 Function 构造器，只有在

你显式调用 Function 构造器时（如 new Function('x', 'return x')）才有。

注意，本质上，a instanceof b 只是一个运算，即满足某种条件就返回 true/false，当我们说 a 是 b 的实例时，也只是表示他们符合某种关系。JS 是一门强大的动态语言，你甚至可以在运行时改变这种关系，比如修改对象的原型

从而改变 instanceof 运算的结果。此外，ES6+ 已允许通过 Symbol.hasInstance 来自定义 instanceof 运算。

Function.prototype//"function"

后来意见：

先有的Object.prototype， Object.prototype构造出Function.prototype，然后Function.prototype构造出 Object和Function。

Object.prototype是鸡，Object和Function都是蛋。

prototype

有一个默认的constructor属性,用于记录实例由哪个构造函数创建.

proto

每一个对象都具有的一个属性,叫proto,这个属性指向该对象的原型.，原型有两个属性,constructor和proto

既然实例对象和构造函数都可以指向原型,那么原型是否有属性可以指向构造函数或实例吗?

proto与其说是一个属性,不如说是个getter/setter,当使用obj.proto时,可以理解为返回了 Object.getPrototypeOf(obj).

每一个原型都有一个constructor属性指向关联的构造函数.

console.log(person.__proto__ == Person.prototype) // true

console.log(Person.prototype.constructor == Person) // true 原型对象的constructor指向构造函数本身

// 顺便学习一个ES5的方法,可以获得对象的原型

console.log(Object.getPrototypeOf(person) === Person.prototype) // true

console.log(Object.getPrototypeOf(person))

person.__proto__

Person.prototype //constructor

实例&原型

当读取实例属性时,若找不到,就会查找与对象关联原型中的属性,若还查不到,就去找原型的原型,一直找到最顶层为止.

原型的原型

实例的proto指向构造函数的prototype

原型链

console.log(Object.prototype.__proto__ === null) // true

意思就是Object.prototype没得原型.

图中由相互关联的原型组成的练状结构就是原型链(蓝色这条线)

创建一个原型链只有name属性的对象

let obj = Object.create(null) //为obj的prototype属性赋值为null

obj.name = 'merry'

console.log(obj)

参考文档https://zh.javascript.info/prototype-methods

proto和prototype

prototype是原型对象

__ proto __ 将对象和该对象的原型相连