首页
学习
活动
专区
圈层
工具
发布

帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

前言   作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们...但是由于JS中函数也是一种对象,所以函数也拥有__proto__和constructor属性,这点是致使我们产生困惑的很大原因之一。...感谢网友的指出,这里解释一下上段中“每个对象都有构造函数”这句话。...而单从constructor这个属性来讲,只有prototype对象才有。每个函数在创建的时候,JS会同时创建一个该函数对应的prototype对象,而函数创建的对象....本文就此结束了,希望对那些对JS中的prototype、__proto__与constructor属性有困惑的同学有所帮助。

2.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    第197天:js---caller、callee、constructor和prototype用法

    fn=function(n){ 36 if(n>0) return n+fn(n-1); 37 return 0; 38 } 39 alert('采用传统方式'+fn(10)); 三、constructor...1 // 什么是构造函数 - -专门用于创建对象或者累的函数 -- 因为js中原来没有对象的概念,通过函数来间接实现面向对象 2 //我们将创建对象的时候那个函数称之为构造函数 3 //我们可以通过...constructor属性获取某个对象的构造函数 4 //constructor 属性就是用来构造对象实例的函数引用 - 后面的知识点 5 //构造函数 创建的对象 6 function...7 this.name = name; 8 } 9 var zhangsan = new Student('张三'); 10 if (zhangsan.constructor...15 var str = new String("Hi"); 16 if (str.constructor == String) 17 document.write("

    73520

    彻底深刻理解js原型链之prototype,proto以及constructor(一)

    前言 以下概念请花费一定的时间彻底理解,才能进行下一步,思考题一定要思考,这样才能彻底掌握原型链的知识点,教程中如果有任何的错误不足请指正!...思考: js的引用数据类型都属于函数对象吗?...引用类型值:指的是那些保存在堆内存中的对象,意思是,变量中保存的实际上只是一个指针,这个指针执行内存中的另一个位置,由该位置保存对象 那么数组,普通对象,函数对象都算是引用数据类型,引用数据类型范围包含函数对象的范围...基本类型值:指的是保存在栈内存中的简单数据段;除开函数对象之外的对象都是普通对象,那么普通对象范围是包含基本数据类型的 事实上(函数对象,普通对象)以及(基本数据类型,引用数据类型)是在不同角度对js变量进行的定义...所以答案是 js报错(有没有一种被我坑了的感觉) 构造器constructor思考题解答 思考:a.prototype.proto.constructor指向谁?

    96410

    彻底深刻理解js原型链之prototype,__proto__以及constructor(二)

    的proto指向自己的prototype,这也向我们解释了为什么Function.prototype类型是function 我们通过proto只能获取到原型对象中的方法和属性,所以persion1通过原型链是获取不到...Persion的myName属性,但是我们可以通过原型对象的constructor来获取或者修改Persion的属性(这点太给力了) 请注意,有时候这个方法也不好使,因为原型对象的constructor...中也有一份吗?...; 通过关系图可以看到不相等,我已经在意外收获中解答了,答案为:false perison1.prototype....__proto__===Object.prototype; 只看图可以看到perison1没有prototype,是普通对象所以答案为:js报错~~ Persion.prototype.

    1.1K10

    js中settimeout()的用法详解_js中setattribute

    大家好,又见面了,我是你们的朋友全栈君。 setTimeout与setTimeInterval均为window的函数,使用中顶层window一般都会省去,这两个函数经常稍不留神就使用错了。...setTimeout内的函数先不执行,隔一段时间后再执行,函数后面的数字是隔的时间,单位是毫秒(千分之一秒) 比如: setTimeout(‘alert(“hello world!”)’..., 400); setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,直到clearInterval()被调用或窗口被关闭。 比如: Stop interval setInterval动作的作用是在播放动画的时...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    17.2K20

    js中find的用法_js中find函数

    今天我们要说的是结合ES6新特性谈一下js里面的一个很好用的方法-find() 现在的前端和过去的不一样,过去的前端只要会画页面就行了,但是现在仅仅会画页面已经远远不够了,现在前端还需要会处理数据,而且还要会将数据分析分类处理...下面我们讲怎么用前端处理这块的逻辑 首先我们拿到了所有的数据这里我直接放到一个测试用的js里面存放, 要实现之前说的效果,就需要使用我们今天的主角find()方法。 find()是用来做什么的呢?...find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined 在本文章需要注意的几个点: ①、第一个元素 ②、测试函数 那么如何使用呢?.../find_testcodes.js" type="text/javascript" charset="utf-8"> js/jquery-1.11.2....min.js" type="text/javascript" charset="utf-8">

    14.1K30

    js中的Hook

    简单理解:   hook(钩子)就是: 把将要执行的的函数或者一系列动作注册到一个统一的接口下面, 当应用程序调用此接口(即hook)时,就等于调用了这一系列动作。...JS中的钩子(hook)的例子 JS中的钩子(hook)的例子1: 例如我们在向后台进行ajax请求的时候,后台经常会返回我们一些常见的错误码,如:001代表用户不存在,002代表用户密码输入错误。...这个时候我们要将错误友好的提示给用户。这个时候我们该怎样实现呢?...一般的写法可能是: $.ajax(option,function(result){ var errCode = result.errCode ;//错误码 if(errCode){...switch case来实现,但是这个两种写法都无法避免一个问题就是如果我的错误码特别多,那得写多少个if else和case 啊?

    7.5K31

    Js中的变量

    Js中的变量:  1:如果在var中没有初始化变量的值,则默认为undefined.  2:可以不用var来申明一个变量,但是在过程级中申明一个变量时,就必须用var.   ...var currentCount  5: 在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,    而 undefined 的操作象特殊值NaN (不是一个数字...请注意,比较大小时字符串自动转换为相等的数字,但加法(连接)运算时保留为字符串。...js中的数据类型  1:Jscript 有三种主要数据类型、两种复合数据类型和两种特殊数据类型    主要(基本)数据类型是: 字符串 数值 布尔    复合(引用)数据类型是: 对象 数组    特殊数据类型是...: Null Undefined  2:测试是否已经声明变量 x :    if (typeof(x) == "undefined")      // 作某些操作 js中的内置对象  1:Jscript

    16.2K60

    Js中的堆栈

    Js中的堆栈 堆heap是动态分配的内存,大小不定也不会自动释放,栈stack为自动分配的内存空间,在代码执行过程中自动释放。...栈区 在栈内存中提供一个供Js代码执行的环境,关于作用域以及函数的调用都是栈内存中执行的。...Js中基本数据类型String、Number、Boolean、Null、Undefined、Symbol,占用空间小且大小固定,值直接保存在栈内存中,是按值访问,对于Object引用类型,其指针放置于栈内存中...,堆内存中存储实际对象,在栈内存中存储对象的指针,对于对象的访问是按引用访问的,在堆区的内存不会随着程序的运行而自动释放,这就需要实现垃圾回收机制GC,需要注意的是在Js中没有类似于C中的free()函数去手动释放内存...,从而决定是否需要进行内存回收,在Js中主要有引用计数与标记清除两种垃圾回收算法。

    4.2K30

    彻底弄懂prototype, __proto__, constructor, instanceof的渊源

    // 构造函数的constructor 是 创建构造函数的东西 Cat.constructor === Function // 第一组关系:实例的__proto__ 指向 构造函数的prototype...这么理解: 构造函数是创建实例的机器 实例在创建过程中能获得什么属性,取决于机器藏了哪些属性 这坨属性藏在构造函数的prototype属性上(称之为原型对象) 在new实例的时候,给实例挂上__proto...和继承 第零组关系中,我们知道实例的constructor 是 构造函数: // 实例的constructor 是 构造函数 new Cat().constructor === Cat 那实例的constructor...npm下载量很高的is模块中,有一行上古代码: if (type === '[object Function]') { return value.prototype === other.prototype...== Panel.prototype 如果函数不是构造函数或Class,比较prototype就毫无意义,类库里比较函数的prototype在OOP不怎么盛行的JS里作用十分有限 支持原创

    54920

    js中的对象

    js中的对象 在编程语言中,提到对象,一般都含有一个隐藏的上下文面向对象编程。 面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式。..., cedf:function(){console.info("cdef")}, "arr":[1,2,3], o:{"name":"jake"} } “在js中,对象是属性的无序集合...1.2 集合 集合是说 对象中可以有很多个属性。属性之间用逗号分隔。 1.3 无序 属性与属性之间,没有先后顺序之分。 对比一下,数组的元素之间有序的。...2. js中对象的分类 众观整个js中的对象,可以分成三类: 内置对象 宿主对象 自定义的对象 2.1 内置对象 “由ECMA实现、不依赖于宿主环境的对象,这些对象在js程序执行之前就已经存在了”。...js有两个运行的环境: (1) 浏览器。我们在.html文件中加入js代码,再通过浏览器来打开,这里浏览器就是javascript的运行环境。 在浏览器端的js而言,宿主对象就是浏览器对象。

    8.5K50
    领券