关闭

instanceof与constructor的区别

时间: 2018-12-20阅读: 862标签: js知识

名词介绍 

instanceof 的作用是判断实例对象是否为构造函数的实例,实际上判断的是实例对象的__proto__属性与构造函数的prototype属性是否指向同一引用;

constructor 的作用是返回实例的构造函数,即返回创建此对象的函数的引用。


 区别

先贴出代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Instanceof</title>
</head>
<body>
    
</body>
<script>
    // 创建植物plant类
    var plant = function(name,where){
        this.name = name;
        this.where = where;
        document.write(this.name + "喜欢" + this.where + "的环境<br>");
    }
    // 创建动物animal类
    var animal = function(name,food){
        this.name = name;
        this.food = food;
        document.write(this.name + "吃" + this.food + "<br>");
    }
    // new两个实例dog和cat
    var dog = new animal("狗","骨头");
    var cat = new animal("猫","鱼");
    
    // new两个实例greenDill和hangBasket
    var greenDill = new plant("绿萝","湿热");
    var hangBasket = new plant("吊篮","温暖湿热");
</script>
</html>

上边代码中的创建了两个函数,new了四个实例。 

instanceof 


 上图可以看出用 instanceof 判断出dog的构造函数是animal,这个结果是意料之中的,但为什么Object也是dog的构造函数呢?上篇文章(https://www.cnblogs.com/menggirl23/p/10088465.html)中提到了实例对象、构造函数、原型对象之间的关系,了解这几个之间关系的应该就能明白为什么Object也是dog的构造函数。

因为构造函数animal的 prototype 也是一个对象,对象就有__proto__属性,就会沿着原型链一直往上找,直到__proto__:Object结束,所以才会有这样的结果。

constructor   

上边名词介绍中写到constructor返回的是创建此对象的函数的引用



总结

instanceof找到的是实例在原型链中所有的构造函数,不容易找到直接创建实例的构造函数;

constructor找到的是构造函数只有一个,就是直接创建这个实例的构造函数,所以用constructor找实例的构造函数更严谨。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1653

关闭

js变量引用(指针)

基本类型:Number,Boolen,null,String,Underfined 存放在栈内存中,数据长度是固定的。引用类型:Object存在堆内存中,数据长度是变化的(同时有栈内存中有一个指针指向这个Object的)。

base91 for javascript

原理和 base64 是一样的,ASCII 共有94个可打印字符,base64 使用了其中 64 个,base91 使用了 91 个。

Js常用基础算法

冒泡排序;插入排序 过程就像你拿到一副扑克牌然后对它排序一样;快速排序;回文字符串;翻转字符串;字符串中出现最多次数的字符;数组去重;二分查找

为什么JavaScript开发如此疯狂

Web开发中其他一切对你而言都是小菜一碟,但当你深入探究JavaScript的时候,不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础的知识内容,并且这些内容可以帮助你理解所有知识

你所忽略的js隐式转换

你有没有在面试中遇到特别奇葩的js隐形转换的面试题,第一反应是怎么会是这样呢?难以自信,js到底是怎么去计算得到结果,你是否有深入去了解其原理呢?下面将深入讲解其实现原理。

10个JavaScript难点:能够读懂这篇博客的JavaScript开发者,运气不会太差…

10个JavaScript难点包括:立即执行函数,闭包,使用闭包定义私有变量,prototype,模块化,变量提升,柯里化,apply, call与bind方法,Memoization,函数重载

javascript难点是什么?

javascript难点是什么?下面本篇文章就来给大家介绍一下10个JavaScript难点,感兴趣的小伙伴们可以参考一下,希望对大家有所帮助。立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字

TS与JS中的Getters和Setter究竟有什么用?

在本文中,我们讨论了getter 和 setter 在现代 Web 开发中的实用性。它们有用吗?什么时候使用它们是有意义的?尽管我不同意 getter 和 setter 完全是一个反模式。但它们在几种情况下能带来更多的实用性。

7个常见的 JavaScript 测验及解答

我相信学习新事物并评估我们所知的东西对自己的进步非常有用,可以避免了我们觉得自己的知识过时的情况。在本文中,我将介绍一些常见的 JavaScript 知识。请享用!

js排序算法:计数排序的实现方法

计数排序是一种线性排序算法,用于确定范围的整数的线性时间排序算法,不用进行比较。基本思想是对于每个元素x,找出比x小的数的个数,从而确定x在排好序的数组中的位

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!