作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们.这里说明一点,__proto__属性的两边是各由两个下划线构成(这里为了方便大家看清,在两下划线之间加入了一个空格:_ _proto_ _),本文基于谷歌浏览器(版本 72.0.3626.121)的实验结果所得.   现在正式开始! 让我们从如下一个简单的例子展开讨论,并配以相关的图帮助理解…

彻底搞懂 JS 中 this 机制 摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规则 绑定规则的优先级 绑定例外 扩展:箭头函数 this 是什么 理解this之前, 先纠正一个观点,this 既不指向函数自身,也不指函数的词法作用域.如果仅通过this的英文解释,太容易产生误导了.它实际是在函数被调用时才发生的绑定,也就是说this具体指向什么,取决于你是怎么调用的函数. th…

让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMAScript规范的基础上,我画了一张图,我想通过它你会彻底地搞清楚关于==的一切.同时,我也试图通过此文向大家证明==并不是那么糟糕的东西,它很容易掌握,甚至看起来很合理. 图1: ==运算规则的图形化表示 ==运算规则的精确描述在此:The Abstract Equality Comparison…

一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for "use strict"; /** * * @author xgqfrms * @license MIT * @copyright xgqfrms * @created 2020-07-01 * @modified * * @description for : var hoisting, brea…

讲原型的时候,我们应该先要记住以下几个要点,这几个要点是理解原型的关键: 1.所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外). 2.所有的引用类型都有一个’_ _ proto_ _'属性(也叫隐式原型,它是一个普通的对象). 3.所有的函数都有一个’prototype’属性(这也叫显式原型,它也是一个普通的对象). 4.所有引用类型,它的’_ _ proto_ _'属性指向它的构造函数的’prototype’属性. 5.当试图得到一个对象的属性时,如果这个对象本身不存在这个…

在开始之前,必须要知道的是:对象具有__proto__.constructor(函数也是对象固也具有以上)属性,而函数独有prototype 在博客园看到一张图分析到位很彻底,这里共享: 刚开始看这图很懵,根本看不懂,但是细品,多品后恍然大悟,然后总结出以下几点,很重要切记 1.切记:对象的内置属性__proto__一定指向的是它构造函数的原型对象 2.切记:对象的内置属性__proto__.__proto__一定指向Object原型对象(Object.prototype) 3.切记:对象的内置…

原生的原型链 function fn(){},fn 为 Function的一个实例,原型链为 null -> Object -> Function -> fn: fn.__proto__ === Function.prototype Function.prototype.__proto === Object.prototype Object.prototype.__proto__ === null 原型链通过原型(prototype)链接,prototype 就是一个 只有(构造)函数才…

1. JavaScript内置对象 所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用.例如Array String 等等.JavaScript一共有12内置对象    其中10个函数类型( String,Number,Boolean,Array,Function,Date,RegExp,Error,Object,Event )函数类型 有 __proto__和 prototype 属性 2个对象类型(Math,JSON) 对象类型只有__proto__属性. 下面…

JavaScript中实现继承的6种方案 01-原型链的继承方案 function Person(){ this.name="czx"; } function Student(){} var p1=new Person(); Student.prototype=p1; var student1=new Student(); console.log(student1); // Person{} console.log(student1.name); // czx 这是最简单的一种方案,同…

大家知道,JavaScript中的==是一种比较复杂运算,它的运算规则很奇怪,很容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读ECMAScript规范的基础上,我画了一张图,我想等你理解了这张图后,会彻底地弄懂关于==运算的一切.同时,我试图通过此文向大家证明==并不是那么糟糕的东西,它很容易掌握,甚至看起来很合理,并没那么糟糕. 先上图: 图1 == 运算规则的图形化表示 ==运算规则的精确描述在此:The Abstract Equality Compariso…

晨叔周刊,每周一话题,技术天天涨. 本周的话题是JS的内存问题(加入本周话题,请点击传送门). 图 话题入口 今天的技术晨报来,就来谈谈JS中变量的,值传递和引用传递的问题.现在,对于很多的JSer来讲,基本不关心堆和栈的问题,代码照样666. 但是,现在的前端,不再是传统的JQ时代,而是MVVM,组件化,工程化.前端的承载着复杂业务逻辑.为此,内存问题,成为JSer必须要考虑的问题. 本文从堆栈讲起,让大家理解JS中变量的内存使用以及变动情况 . 一.初步了解堆栈  先初步了解JS中的堆和栈,…

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言中的double类型(双精度浮点型),不区分浮点型和整数型. number类型不同进制 number 有四种进制表示方法,十进制,二进制,八进制和十六进制 表示方法 二进制: 0B或者0b (数字0和字母B或者小写字母b) ,后接1或者0表示二进制数 八进制: es5下禁止表示八进制数会自动转化为十进制数,es6用0o ,后接小于8的数字表示八进制 十六进制: 以0x或者0…

在这里必须要提一句的是,this指向是学习js必须要掌握的(必须),再开始之前先看底部的总结,然后回上面看例子便一目了然. 例子1: function a(){ var user = "TangSir"; console.log(this.user); //undefined console.log(this); //Window } a();看总结第2条,这里函数本身没有被父级对象调用,那么这里就指向window function a(){ var user = "Tang…

码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14577243.html 目录 码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14577243.html Script 标签 CommonJS规范(同步加载模块) 创建模块 加载模块 导出模块 CommonJS 特点 AMD(Asynchronous Module Definition) 创建模块 加载规范模块 加载非规范的模块…

基础 typeof 运算符是 javascript 的基础知识点,尽管它存在一定的局限性(见下文),但在前端js的实际编码过程中,仍然是使用比较多的类型判断方式. 因此,掌握该运算符的特点,对于写出好的代码,就会起到很大的帮助作用. typeof 返回一个字符串,表示该操作值的数据类型,基本语法: typeof operand typeof(operand) 可能返回的类型字符串有:string, boolean, number, bigint, symbol, undefined, funct…

== 运算的规则: undefined == null,结果是true.且它俩与所有其他值比较的结果都是false. String == Boolean,需要两个操作数同时转为Number. String/Boolean == Number,需要String/Boolean转为Number. Object == Primitive,需要Object转为Primitive(具体通过valueOf和toString方法). 原文链接:https://zhuanlan.zhihu.com/p/2165…

实现继承的几种方式以及他们的优缺点(参考文档1.参考文档2.参考文档3) 要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链:每一个构造函数都有prototype属性(显示原型),用来显示修改对象的原型,实例.__proto__=构造函数.prototype=原型.原型链的特点就是:通过实例.__proto__查找原型上的属性,从子类一直向上查找对象原型的属性,继而形成一个查找链即原型链. 1)原型链继承: 我们使用原型继承时…

本文转载自:@manxisuo的<通过一张简单的图,让你彻底地.永久地搞懂JS的==运算>. 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容让人犯错,从而成为JavaScript中"最糟糕的特性"之一. 在仔细阅读了ECMAScript规范的基础上,我画了一张图,我想通过它你会彻底地搞清楚关于==的一切.同时,我也试图通过此文向大家证明==并 不是那么糟糕的东西,它很容易掌握,甚至看起来很合理. 先上图: 图1 == 运算规则的精确描述在此…

在某天,我听了一个老师的公开课,一张图搞懂了原型链. 老师花两天时间理解.整理的,他讲了两个小时我们当时就听懂了. 今天我把他整理出来,分享给大家.也让我自己巩固加深一下. 就是这张图: 为了更好的图文对照,我为每条线编了标号,接下来的细节讲解,都会用到这张图里的编号: 为了你更好的对照阅读,你可以单独打开这张图片,然后对比着文章看. 当然,我后边也会贴心的把对应区域截小图贴在文案附近. 前置知识 在对这张图进行详细拆解前,我们先来说几个前置的基础知识.以便后续更好的理解. Function.O…

js高级里面原型链对于新手来说并不友好,总的来说就是 任何函数都有自己的原型对象(prototype),任何实例对象都__proto__指向构造函数的原型 先来个最简单的原型三角关系 var fn = new Fn(); 实例对象不能直接访问构造函数而是通过访问构造函数的原型间接访问构造函数 现在直接深入复杂的原型链图 1.Fn为构造函数 var fn = new Fn() 2.Fn为实例对象 var Fn = new Function() 3.var obj = new Object() 4…

前言 JavaScript的原型和原型链是面试的时候经常被问及到的问题,考察了我们对JavaScript的基础掌握情况,今天我们在这里用一张图来梳理下其中的知识点. 下面我来引入这张非常经典的图,我也是亲手画了下,大家也可以自己动手去画,对理解原型及原型链有很大的帮助. 这张图详细的描述了构造函数Function,Object以及它们实例之间的原型关系. 大致总结下就是如下几点: 大致总结一下就是: Object是作为众多new出来的实例的基类 , function Object(){ [ na…

原文: 1.深入理解javascript原型和闭包——prototype原型 2.三张图搞懂JavaScript的原型对象与原型链 打开浏览器控制台,任意定义一个对象,打印出来后,会发现有最后一定有一个默认属性 “__proto__”,这是 js 的设计思路,类似于 java 中的继承. 注意:在本章中严格区分函数与对象 prototype 与 __proto__ 1.区别 var a = {}; console.log(a.prototype); //undefined console.log…

https://cloud.tencent.com/developer/article/1408283 https://cloud.tencent.com/developer/article/1195938 https://cloud.tencent.com/developer/article/1359936 https://cloud.tencent.com/developer/article/1079079 https://cloud.tencent.com/developer/articl…

这篇文章主要是学习一下JavaScript中的难点------原型和原型链 自定义一个对象 我们学习一门编程语言,必然要使用它完成一些特定的功能,而面向对象的语言因为符合人类的认知规律,在这方面做得很好,今天我以JS为例,探索一下JS不同于其他面向对象的语言的地方-------原型和原型链 首先,假设你在做一个项目,要造一个新的对象,标准库里面没有.那你只能用构造函数去构造一个 function Person(){ //构造函数 } 以上Person就是一个构造函数,可以用来生成小明 小红 等等…

转载===方便以后复习 原文网址:https://www.jianshu.com/p/dee9f8b14771 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 在上面的例子中 o1 o2 o3 为普通对象,f1 f2 f3 为函数对象.怎么区分,其实很简单,凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象.f1,f2,归根结底都是…

本文由浅到深,循序渐进的将原型与继承的抽象概念形象化,且每个知识点都搭配相应的例子,尽可能的将其通俗化,而且本文最大的优点就是:长(为了更详细嘛). 一.原型 首先,我们先说说原型,但说到原型就得从函数说起,因为原型对象就是指函数所拥有的prototype属性(所以下文有时说原型,有时说prototype,它们都是指原型). 1.1 函数 说到函数,我们得先有个概念:函数也是对象,和对象一样拥有属性,例如: function F(a, b) { return a * b; } F.length…

JS的原型.原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个概念一知半解,碰到问题靠"猜",却不理解它的规则! prototype 只有函数有prototype属性 let a = {} let b = function () { } console.log(a.prototype) // undefined console.log(b.pro…

本文在个人主页同步更新~ 背就完事了 介绍:一些知识点相关的面试题和答案 使用姿势:看答案前先尝试回答,看完后把答案收起来检验成果~ 面试官:什么是构造函数 答:构造函数的本质是一个普通函数,他的特点是需要通过`new`关键字来调用,用来创建对象的实例.所有的引用类型,如[],{},function等都是由构造函数实例化而来.一般首字母大写. 解析:首字母大写只是约定俗成的规范.首字母小写的函数也可以用作构造函数. 面试官:什么是原型和原型链 答:原型模式是JS实现继承的一种方式.所有的函数都有…

原型(prototype)这个词来自拉丁文的词proto,意谓“最初的”,意义是形式或模型.在JavaScript中,原型的探索也有很多有趣的地方,接下来跟随我的脚步去看看吧. 原型对象释义 每一个构造函数都有一个与之相关联的对象,该对象称之为原型对象. 每个实例对象都能共享其原型对象上的属性和方法. 原型对象的作用主要用来实现属性的继承,让实例对象能共享原型对象的属性,减少内存分配. 所以,在上一节中,我们想在每个Person对象中共享同一个say方法,可以这样来实现. function Pe…

这篇文章需要认认真真仔仔细细的看才能看懂 一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); var o3 = new f1(); var o1 = {}; var o2 =new Object…