【亡羊补牢】JS灵魂之问 第19期 修炼内功 对象枚举知多少

引言

有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 对象枚举 ,那今天这篇看能不能问倒你了,一起来探索一下吧。

仰望星空的人,不应该被嘲笑

对象枚举

开门见山,我们直接来一道题,看看下面两种方式打印有区别吗?还是都可以打印?

var car = {
  brand: 'Benz',
  color: 'red',
  displacement: '3.0',
  lang: '5',
  width: '2.5'
}
for(var key in car){
  console.log(car.key);
  console.log(car[key]);
}

答案是 car.key没有办法访问属性值,返回的都是 undefined,而car[key]可以。因为当我们访问 cay.key时,JS引擎会这样做:

car.key -> car['key'] -> undefined

下面,我们来探究一下 hasOwnProperty这个方法。

在讲解方法之前,先来看看如下代码,会输出什么?

function Car(){
  this.brand = 'Benz';
  this.color = 'red';
  this.displacement = '3.0';
}

Car.prototype = {
  lang: 5,
  width: 2.5
}

Object.prototype.name = 'Object';

var car = new Car();
for(var key in car){
  console.log(key + ':' + car[key]);
}

答案如下:

brand:Benz
color:red
displacement:3.0
lang:5
width:2.5
name:Object

诶,我们发现了一个问题,当我们访问car实例对象的时候,原型链上所有的属性我们都访问出来了。那么我想要打印自己构造函数里面的属性值而不要原型链上的该怎么做呢?于是就印出来 hasOwnProperty,现在修改一下代码:

function Car() {
  this.brand = 'Benz';
  this.color = 'red';
  this.displacement = '3.0';
}

Car.prototype = {
  lang: 5,
  width: 2.5
}

Object.prototype.name = 'Object';

var car = new Car();
for (var key in car) {
  if (car.hasOwnProperty(key)) {
    console.log(key + ':' + car[key]);
  }
}

此时打印结果如下,发现只打印自己构造函数里面的属性值,没有打印原型链上的

brand:Benz
color:red
displacement:3.0

接下来,我们再来探究另外一个重要的东西,instanceof

开门见山,还是以例题来热身:

function Car(){}
var car = new Car();

function Person(){}
var p = new Person();

console.log(car instanceof Car);
console.log(car instanceof Object);
console.log([] instanceof Array);
console.log([] instanceof Object);
console.log({} instanceof Object);

答案是全为true,解释一下,A instanceof B,就是用来判断 A对象原型里面有没有 B的原型。也就是原型链上重合的都为 true

最后

文章产出不易,还望各位小伙伴们支持一波!

往期精选:

小狮子前端の笔记仓库

访问超逸の博客,方便小伙伴阅读玩耍~

学如逆水行舟,不进则退
一百个Chocolate CSDN认证博客专家 CSDN博客专家 博客之星 前端开发攻城狮
JS,TS,LeetCode,Vue,React,算法爱好者。
主要分享前端知识,立志成为优秀前端博主。
座右铭:学如逆水行舟,不进则退!
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值