关于javascript:这-6-点知识让我对-JavaScript-的对象有了更进一步的了解

作者：Valentino Gagliardi
译者：前端小智
起源：valentinog

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

1. 对象办法 & this

办法只是保留函数值的属性。

简略对象办法

let rabbit = {};
rabbit.speak = function(line) {console.log("小兔子说："+ line);
};
rabbit.speak("我还活着。")

输入：

 T 小兔子说：我还活着。

对象办法 & this

当一个函数作为办法被调用时，对象会将函数作为属性并立刻调用，就像在 object.method() 中一样，其主体中的非凡变量 this 将指向被调用的对象。

function speak(line) {console.log(this.type + "小兔子说：" + line)
};
let whiteRabbit = {type: "红色", speak: speak}

whiteRabbit.speak("噢，我真可恶！")

输入：

红色小兔子说：噢，我真可恶！

apply & call

• apply 和 call能够用于object.method()
• apply和 call 办法都有一个可用于模仿办法调用的第一个参数
• 实际上第一个参数是用来指定 this

function speak(line) {console.log(`${this.type}的小兔子说：${line}` );
};
let whiteRabbit = {type: "红色", speak: speak};

speak.apply(whiteRabbit, ["你这个小坏蛋!"]);
speak.call({type: "彩色"}, "嘿嘿，我不坏，你不爱!");

红色的小兔子说：你这个小坏蛋!
彩色的小兔子说：嘿嘿，我不坏，你不爱!

2.Prototype(原型)

• 简直所有的对象都有一个prototype
• prototype是另一个用作属性的备用源的对象
• 当一个对象拜访本身没有属性时，它会从它的 prototype 搜寻该属性，如果没有找到就持续从它的 prototype 的prototype查找，依此类推，直到 null 为止。

空对象的原型

原型链最终的指向是 Object 的 prototype, 而 Object 中的__proto__ 是null

let empty = {};
console.log(empty.toString);
console.log(empty.toString());

输入：

[Function: toString]
[object Object]

其余对象 (数组、函数等等) 的默认属性

• 许多对象没有间接将 Object.prototype 作为本人的原型，但有本人的默认属性
• 从 Function.prototype 派生的函数和 从 Array.prototype派生的数组

console.log(Object.getPrototypeOf(isNaN) ==
            Function.prototype);
console.log(Object.getPrototypeOf([]) ==
Array.prototype);

输入：

true
true

Object.create 创立具备特定原型的对象

• protoRabbit充当所有兔子共享的属性的容器
• 单个兔子对象（如杀手兔子）蕴含仅实用于本身的属性（在本例中为type），并从其原型派生共享属性

let protoRabbit = {speak: function (line) {console.log(`${this.type}兔子说：${line}` );
  }
}

let killerRabbit = Object.create(protoRabbit)
killerRabbit.type = '杀手'
killerRabbit.speak('筹备受死吧！')

输入：

杀手兔子说：筹备受死吧！

3. 构造函数

— 构造函数原型

• 创立从某个共享原型派生的对象的更不便的办法是应用构造函数
• 在 JavaScript 中，调用后面带有 new 关键字的函数会将其视为构造函数
• 构造函数将其 this 变量绑定到一个新对象，除非它显式返回另一个对象值，否则此新对象将从调用中返回
• 用 new 创立的对象被称为是其构造函数的实例
• 约定将构造函数的名称大写，以便于与其余函数辨别开

function Rabbit(type) {this.type = type;}

let killerRabbit = new Rabbit("killer");
let blackRabbit = new Rabbit("black");
console.log(blackRabbit.type);

输入：

black

— 默认状况下，构造函数具备 Object.prototype

• 构造函数（实际上是所有函数）会主动获取一个名为 prototype 的属性，默认状况下，该属性蕴含一个从 Object.prototype 派生的一般空对象
• 应用此构造函数创立的每个实例都将此对象作为其原型

function Rabbit(type) {this.type = type;}

let blackRabbit = new Rabbit("彩色");
Rabbit.prototype.speak = function(line) {console.log(`${this.type}的兔子说：${line}` );
};
blackRabbit.speak("Boom... 一波王炸！");

输入：

彩色的兔子说：Boom... 一波王炸！

4. 重写派生属性

— 雷同的原型名称

• 如果原型中有同名的属性，则不会更改此属性
• 该属性被增加到对象自身

function Rabbit(type) {this.type = type;}
let blackRabbit = new Rabbit("black");
let killerRabbit = new Rabbit("killer");

Rabbit.prototype.teeth = "small";
console.log(killerRabbit.teeth);
// small
killerRabbit.teeth = "long, sharp, and bloody";
console.log(killerRabbit.teeth);
// long, sharp, and bloody
console.log(blackRabbit.teeth);
// small
console.log(Rabbit.prototype.teeth);
// small

上面 console.log(blackRabbit.teeth)的后果是 small，因为blackRabbit 对象不具备 teeth 属性，它继承自 Rabbit 对象本人的 teeth 属性，值为 small。

5. 原型的烦扰

— 可枚举与不可枚举

let map = {}

function storePhi(event, phi) {map[event] = phi
}

storePhi('pizza', 0.069)
storePhi('touched tree', -0.081)

Object.prototype.nonsense = 'hi'

for(let name in map) {console.log(name)
}

console.log('nonsense' in map)
console.log('toString' in map)

输入后果:

pizza
touched tree
nonsense
true
true

toString没有呈现在 for/in 循环中，然而 in 运算符中返回 true，这是因为 JS 辨别 可枚举属性 和不可枚举属性。

咱们通过简略调配创立的所有属性都是可枚举的，Object.prototype中的规范属性都是不可扭转的，这就是为什么它们不呈现在这样的 for/in 循环中的起因。

let map = {};
function storePhi(event, phi) {map[event] = phi;
}

storePhi("pizza", 0.069);
storePhi("touched tree", -0.081);

Object.defineProperty(Object.prototype, "hiddenNonsense",
                {enumerable: false, value: "hi"})

for (var name in map) {console.log(name)
}

console.log(map.hiddenNonsense)

输入：

pizza
touched tree
hi

通过应用 Object.defineproperty 函数能够定义本人的不可枚举属性，该函数容许咱们管制要创立的属性的类型，在该示例中，hiddenNonsense在 map 中，但在 for...in 中不会显示。

— hasOwnProperty vs in 操作符

const map = {}
console.log("toString" in map)
console.log(map.hasOwnProperty("toString"))

输入：

true
false

hasOwnProperty办法通知咱们对象自身是否具备该属性，而无需查看其原型, 这通常是比 in 运算符提供给咱们的信息更有用的信息。

因而，如果你对根底对象原型感到困惑时，倡议你能够这样写 for/in 循环:

for (var name in map) {if (map.hasOwnProperty(name)) {// ... this is an own property}
}

6. 无原型对象

Object.create函数使咱们可能创立具备特定原型的对象。咱们还能够传递 null 作为原型，用来创立不带原型的新对象。

因而，咱们不再须要 hasOwnProperty，因为对象领有的所有属性都是它本人的属性。当初，无论人们对Object.prototype 做了什么，咱们都能够平安地应用 for/in 循环

var map = Object.create(null);
map["pizza"] = 0.069;
console.log("toString" in map);
// false
console.log("pizza" in map);
// true

人才们的 【三连】 就是小智一直分享的最大能源，如果本篇博客有任何谬误和倡议，欢送人才们留言，最初，谢谢大家的观看。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://medium.com/javascript…

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。