这6点知识让我对JavaScript的对象有了更进一步的了解

1. 对象方法 & this

成都创新互联企业建站,10余年网站建设经验，专注于网站建设技术，精于网页设计，有多年建站和网站代运营经验，设计师为客户打造网络企业风格，提供周到的建站售前咨询和贴心的售后服务。对于成都网站建设、成都网站制作中不同领域进行深入了解和探索，创新互联在网站建设中充分了解客户行业的需求，以灵动的思维在网页中充分展现，通过对客户行业精准市场调研，为客户提供的解决方案。

方法只是保存函数值的属性。

简单对象方法

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

输出：

 
 
 
 
    
  
  
  
  
  1. T小兔子说： 我还活着。
    2.

对象方法 & this

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

 
 
 
 
    
  
  
  
  
  1. function speak(line) {
    2. 
  
  
  
  
  2.   console.log(this.type + "小兔子说：" + line)
    3. 
  
  
  
  
  3. };
    4. 
  
  
  
  
  4. let whiteRabbit = {type: "白色", speak: speak}
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. whiteRabbit.speak("噢，我真可爱！")
    7.

输出：

 
 
 
 
    
  
  
  
  
  1. 白色小兔子说：噢，我真可爱！
    2.

apply & call

 
 
 
 
    
  
  
  
  
  1. function speak(line) {
    2. 
  
  
  
  
  2.   console.log(`${this.type}的小兔子说：${line}` );
    3. 
  
  
  
  
  3. };
    4. 
  
  
  
  
  4. let whiteRabbit = {type: "白色", speak: speak};
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. speak.apply(whiteRabbit, ["你这个小坏蛋!"]);
    7. 
  
  
  
  
  7. speak.call({type: "黑色"}, "嘿嘿，我不坏，你不爱!");
    8. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. 白色的小兔子说：你这个小坏蛋!
    2. 
  
  
  
  
  2. 黑色的小兔子说：嘿嘿，我不坏，你不爱!
    3.

2.Prototype(原型)

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

空对象的原型

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

 
 
 
 
    
  
  
  
  
  1. let empty = {};
    2. 
  
  
  
  
  2. console.log(empty.toString);
    3. 
  
  
  
  
  3. console.log(empty.toString());
    4.

输出：

 
 
 
 
    
  
  
  
  
  1. [Function: toString]
    2. 
  
  
  
  
  2. [object Object]
    3.

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

  • 许多对象没有直接将Object.prototype作为自己的原型，但有自己的默认属性
  • 从Function.prototype派生的函数和从Array.prototype派生的数组
 
 
 
 
    
  
  
  
  
  1. console.log(Object.getPrototypeOf(isNaN) ==
    2. 
  
  
  
  
  2.             Function.prototype);
    3. 
  
  
  
  
  3. console.log(Object.getPrototypeOf([]) ==
    4. 
  
  
  
  
  4. Array.prototype);
    5.

输出：

 
 
 
 
    
  
  
  
  
  1. true
    2. 
  
  
  
  
  2. true
    3.
  • Object.create 创建具有特定原型的对象
  • protoRabbit充当所有兔子共享的属性的容器

单个兔子对象(如杀手兔子)包含仅适用于自身的属性(在本例中为type)，并从其原型派生共享属性

 
 
 
 
    
  
  
  
  
  1. let protoRabbit = {
    2. 
  
  
  
  
  2.   speak: function (line) {
    3. 
  
  
  
  
  3.     console.log(`${this.type}兔子说：${line}` );
    4. 
  
  
  
  
  4.   }
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. let killerRabbit = Object.create(protoRabbit)
    8. 
  
  
  
  
  8. killerRabbit.type = '杀手'
    9. 
  
  
  
  
  9. killerRabbit.speak('准备受死吧！')
    10.

输出：

 
 
 
 
    
  
  
  
  
  1. 杀手兔子说：准备受死吧！
    2.

3.构造函数

— 构造函数原型

  • 创建从某个共享原型派生的对象的更方便的方法是使用构造函数
  • 在 JavaScript 中，调用前面带有new关键字的函数会将其视为构造函数
  • 构造函数将其this变量绑定到一个新对象，除非它显式返回另一个对象值，否则此新对象将从调用中返回
  • 用new创建的对象被称为是其构造函数的实例
  • 约定将构造函数的名称大写，以便于与其他函数区分开
 
 
 
 
    
  
  
  
  
  1. function Rabbit(type) {
    2. 
  
  
  
  
  2.     this.type = type;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. let killerRabbit = new Rabbit("killer");
    6. 
  
  
  
  
  6. let blackRabbit = new Rabbit("black");
    7. 
  
  
  
  
  7. console.log(blackRabbit.type);
    8.

输出：

 
 
 
 
    
  
  
  
  
  1. black
    2.

— 默认情况下，构造函数具有Object.prototype

  • 构造函数(实际上是所有函数)会自动获取一个名为prototype的属性，默认情况下，该属性包含一个从Object.prototype派生的普通空对象
  • 使用此构造函数创建的每个实例都将此对象作为其原型
 
 
 
 
    
  
  
  
  
  1. function Rabbit(type) {
    2. 
  
  
  
  
  2.   this.type = type;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. let blackRabbit = new Rabbit("黑色");
    6. 
  
  
  
  
  6. Rabbit.prototype.speak = function(line) {
    7. 
  
  
  
  
  7.   console.log(`${this.type}的兔子说：${line}` );
    8. 
  
  
  
  
  8. };
    9. 
  
  
  
  
  9. blackRabbit.speak("Boom...一波王炸！");
    10.

输出：

 
 
 
 
    
  
  
  
  
  1. 黑色的兔子说：Boom...一波王炸！
    2.

4. 重写派生属性

— 相同的原型名称

  • 如果原型中有同名的属性，则不会更改此属性
  • 该属性被添加到对象本身
 
 
 
 
    
  
  
  
  
  1. function Rabbit(type) {
    2. 
  
  
  
  
  2.     this.type = type;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. let blackRabbit = new Rabbit("black");
    5. 
  
  
  
  
  5. let killerRabbit = new Rabbit("killer");
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. Rabbit.prototype.teeth = "small";
    8. 
  
  
  
  
  8. console.log(killerRabbit.teeth);
    9. 
  
  
  
  
  9. // small
    10. 
  
  
  
  
  10. killerRabbit.teeth = "long, sharp, and bloody";
    11. 
  
  
  
  
  11. console.log(killerRabbit.teeth);
    12. 
  
  
  
  
  12. // long, sharp, and bloody
    13. 
  
  
  
  
  13. console.log(blackRabbit.teeth);
    14. 
  
  
  
  
  14. // small
    15. 
  
  
  
  
  15. console.log(Rabbit.prototype.teeth);
    16. 
  
  
  
  
  16. // small
    17.

下面 console.log(blackRabbit.teeth)的结果是small，因为blackRabbit对象不具有teeth属性，它继承自Rabbit对象自己的teeth属性，值为 small。

5. 原型的干扰

— 可枚举与不可枚举

 
 
 
 
    
  
  
  
  
  1. let map = {}
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. function storePhi(event, phi) {
    4. 
  
  
  
  
  4.   map[event] = phi
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. storePhi('pizza', 0.069)
    8. 
  
  
  
  
  8. storePhi('touched tree', -0.081)
    9. 
  
  
  
  
  9. 
  
  
  
  
  10. Object.prototype.nonsense = 'hi'
    11. 
  
  
  
  
  11. 
  
  
  
  
  12. for(let name in map) {
    13. 
  
  
  
  
  13.   console.log(name)
    14. 
  
  
  
  
  14. }
    15. 
  
  
  
  
  15. 
  
  
  
  
  16. console.log('nonsense' in map)
    17. 
  
  
  
  
  17. console.log('toString' in map)
    18.

输出结果:

 
 
 
 
    
  
  
  
  
  1. pizza
    2. 
  
  
  
  
  2. touched tree
    3. 
  
  
  
  
  3. nonsense
    4. 
  
  
  
  
  4. true
    5. 
  
  
  
  
  5. true
    6.

toString没有出现在for/in循环中，但是in运算符中返回true，这是因为 JS 区分可枚举属性和不可枚举属性。

我们通过简单分配创建的所有属性都是可枚举的，Object.prototype中的标准属性都是不可改变的，这就是为什么它们不出现在这样的for/in循环中的原因。

 
 
 
 
    
  
  
  
  
  1. let map = {};
    2. 
  
  
  
  
  2. function storePhi(event, phi) {
    3. 
  
  
  
  
  3.     map[event] = phi;
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. storePhi("pizza", 0.069);
    7. 
  
  
  
  
  7. storePhi("touched tree", -0.081);
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. Object.defineProperty(Object.prototype, "hiddenNonsense",
    10. 
  
  
  
  
  10.                 {enumerable: false, value: "hi"})
    11. 
  
  
  
  
  11. 
  
  
  
  
  12. for (var name in map) {
    13. 
  
  
  
  
  13.     console.log(name)
    14. 
  
  
  
  
  14. }
    15. 
  
  
  
  
  15. 
  
  
  
  
  16. console.log(map.hiddenNonsense)
    17.

输出：

 
 
 
 
    
  
  
  
  
  1. pizza
    2. 
  
  
  
  
  2. touched tree
    3. 
  
  
  
  
  3. hi
    4.

通过使用Object.defineproperty函数可以定义自己的不可枚举属性，该函数允许我们控制要创建的属性的类型，在该示例中，hiddenNonsense在 map 中，但在 for...in 中不会显示。

— hasOwnProperty vs in 操作符

 
 
 
 
    
  
  
  
  
  1. const map = {}
    2. 
  
  
  
  
  2. console.log("toString" in map)
    3. 
  
  
  
  
  3. console.log(map.hasOwnProperty("toString"))
    4.

输出：

 
 
 
 
    
  
  
  
  
  1. true
    2. 
  
  
  
  
  2. false
    3.

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

因此，如果你对基础对象原型感到困惑时，建议你可以这样写for/in循环:

 
 
 
 
    
  
  
  
  
  1. for (var name in map) {
    2. 
  
  
  
  
  2.     if (map.hasOwnProperty(name)) {
    3. 
  
  
  
  
  3.         // ... this is an own property
    4. 
  
  
  
  
  4.     }
    5. 
  
  
  
  
  5. }
    6.

6.无原型对象

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

因此，我们不再需要hasOwnProperty，因为对象拥有的所有属性都是它自己的属性。现在，无论人们对Object.prototype做了什么，我们都可以安全地使用for/in循环

 
 
 
 
    
  
  
  
  
  1. var map = Object.create(null);
    2. 
  
  
  
  
  2. map["pizza"] = 0.069;
    3. 
  
  
  
  
  3. console.log("toString" in map);
    4. 
  
  
  
  
  4. // false
    5. 
  
  
  
  
  5. console.log("pizza" in map);
    6. 
  
  
  
  
  6. // true
    7.

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

原文：https://medium.com/javascript-in-plain-english/six-things-you-should-know-about-objects-in-javascript-ccd11a9e1998

本文转载自微信公众号「 大迁世界」，可以通过以下二维码关注。转载本文请联系****公众号。

本文标题：这6点知识让我对JavaScript的对象有了更进一步的了解
网站链接：http://www.shufengxianlan.com/qtweb/news35/28735.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸网站建设知识

分类信息网站

LED显示屏　　 　微信公众号二次开发　　 　成都娃娃鱼　　 　网站解决方案　　 　医药医疗网站建设方案　　 　广安网站制作公司　　 　成都移动托管　　 　成都多线机房　　 　网站开发　　 　成都主机托管　　 　广安做网站　　 　成都门户网站建设设计方案　　 　广汉长尔科技　　 　Android开发　　 　成都网站建设公司　　 　四川服务器托管　　 　成都工装公司　　 　微信网站开发　　 　温江电信机房　　 　网站推广