【亡羊补牢】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]);
  }
}

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

扫描二维码关注公众号,回复: 11705734 查看本文章
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

最后

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

往期精选:

小狮子前端の笔记仓库

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

学如逆水行舟,不进则退

猜你喜欢

转载自blog.csdn.net/weixin_42429718/article/details/108650101