文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

再谈构造函数、原型、原型链之间的关系

前言 构造函数、原型、原型链作为ES5的内容，已经是老生常谈的问题了。首先说说为什么要再次拿起这个话题去说呢？...构造函数 什么是构造函数？构造函数就是使用关键字new创建对象时调用的函数。...构造函数的属性可分为两种:1.实例上的属性 2.公用属性 //实例上的属性 function Animal(){ this.name=name; this.age=18; } 原型 原型是每个构造函数都有的...原型的作用是共享方法，一般情况下，我们的公共属性定义在构造函数里面，公共的方法放到原型对象上。...对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链[1]。

69820

详解js原型，构造函数以及class之间的原型关系

原型 概念 在构造函数创建的时候，系统默认的帮构造函数创建并关联一个对象 这个对象就是原型 作用 在原型中的所有属性和方法，都可以被和其关联的构造函数创建出来的所有的对象共享 访问原型 构造函数名...，是js内部使用寻找原型链的属性，通过该属性可以允许实例对象直接访问到原型 3. constructor 含义：原型对象的constructor 指向其构造函数,如果替换了原型对象之后，这个constructor...image 构造函数 在很多编程语言中，如java，objectC,c++等，都存在类的概念，类中有私有属性，私有方法等，通过类来实现面对对象的继承，但是，在ES5以及以前中不像上面这几种语言一样，有严格的类的概念...js通过构造函数以及原型链来实现继承。...在ES5中，继承实质上是子类先创建属于自己的this，然后再将父类的方法添加到this（也就是使用Parent.apply(this)的方式 而在ES6中，则是先创建父类的实例对象this，然后再用子类的构造函数修改

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

    【JS精粹】原型链继承和构造函数继承的 “毛病”

    其基本思想就是通过原型继承多个引用类型的属性和方法。...构造函数继承 构造函数继承，也叫做：“盗用构造函数”，“对象伪装”或“经典继承”。 基本思路：在子类构造函数中用 apply()和 call()方法调用父类构造函数。...，但是它也有它的问题，也是使用构造函数模式自定义类型的问题， 即：必须在构造函数中定义方法（在原型上定义方法，子类是访问不到的），函数不能重用。...思路是：使用原型链继承原型上的属性和方法，而通过构造函数继承实例属性。...并不是面向对象语言，又要通过原型链去模拟面向对象，真的很多小坑的点需要去注意。

    1.2K20

    Javascript 原型链之原型对象、实例和构造函数三者之间的关系

    2017-10-13 10:14:59 首先来说一下名词解释，首先说一下prototype，每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性...，也就是说将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。...再来说一下constructor，对象的constructor属性用于返回创建该对象的函数，也就是我们常说的构造函数。...undefined），这个指针指向上面提到的构造函数的prototype原型对象。...之所以加上引号，因为构造函数和实例之间无法直接访问，需要通过__proto__指针间接读取。 function ab(){} var c = new ab(); console.log(c.

    63410

    JavaScript OOP（三）：prototype原型对象（即构造函数的prototype属性）

    通过构造函数生成的实例化对象，无法共享属性或方法(即每个实例化对象上都有构造函数中的属性和方法)；造成了一定的资源浪费 1 function Obj(name,age){ 2 this.name...构造函数生成对象；构造函数的原型(prototype)属性上面定义的方法或属性被所有实例化对象共享；构造函数的原型属性是实例对象的原型对象。 2.  ...原型对象=构造函数的prototype属性 instanceof 关键字：判断对象是否为构造函数的实例 1 function Obj3(){}; 2 var o8=new Obj3(); 3 console.log...所以我们通过构造函数生成实例化对象，本质其实就是将构造函数的property属性赋值给实例对象的原型对 1 function F(){}; 2 var f1=new F(); 3 console.log...构造函数生成实例化对象；构造函数的prototype属性就是实例化对象的原型对象；原型对象上的属性和方法被所有实例化对象所共享！

    1.1K70

    javascript中常用的创建对象的方法工厂模式构造函数模式原型模式混合使用构造函数模式和原型模式小结

    由此，我们就引出了下一种的方法，原型模式 原型模式 原型对象简而言之，就是每个构造函数创建的对象都有一个指针，这个指针指向它的原形对象，而原形对象也和普通对象一样具有属性和方法，但不同的事，原形对象的属性和方法是让所有实例共享的...prototype.PNG 这就是原型模式创建对象的方法，它可以通过共享来避免重复创建多余的函数。...** 需要注意的是，如果实例对象和原型对象中的存在相同的属性和方法，那么js会先从实例中搜寻，如果找到了就忽略原型对象中的，如果在实例中没有找到，就继续到原型中寻找 ** 混合使用构造函数模式和原型模式...创建自定义类型的最常见方式，就是组合使用构造函数模式与原型模式。...，工厂模式，构造函数模式，原型模式，构造函数模式和原型模式的组合使用。

    1.3K30

    秒懂JS对象、构造器函数和原型对象之间的关系

    一、基本概念 　　1、对象：属性和方法的集合，即变量和函数的封装。每个对象都有一个__proto__属性，指向这个对象的构造函数的原型对象。 　　...2、构造器函数：用于创建对象的函数，通过new关键字生成对象。函数名一般首字母大写的。 　　...3、原型对象：每个函数都有一个prototype属性，它是一个指向原型对象的指针（原型对象在定义函数时同时被创建） 二、创建对象的方法 　　1、使用构造函数和原型对象共同创建 ?...如上图，构造器函数Person()，通过new关键字创建了两个实例化对象p1、p2，这两个新对象都继承了，构造器Person()函数prototype属性所指向的原型对象。...通过构造函数创建实例对象p1和p2的时候，其中name、age、job这些是通过构造函数生成的（本地部分），sayName方法是通过继承原型对象来实现共享的（远程部分），这样多个实例对象都是由本地（私有

    1.8K70

    原型模式C++类的复制构造函数和赋值运算符

    一、简介 1、原型模式，用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。 2、为什么会用到原型模式？ (1)既然可以直接new，为什么会用到原型模式？...这个可以从两个角度来说，第一，时间消耗角度：如果创建实例的构造函数非常的复杂，在执行这个构造函数时会消耗较长的时间，这时如果需要一个跟刚刚实例化对象参数差不多的实例（可以完全相同，也可以大部分相同）那么直接使用...第二，用户的修改麻烦程度角度，举个例子，假设要通过一个类实例化一各班同学的毕业信息，那么会有大量雷同的信息，这时如果要用new实例化，就需new很多次，更悲剧的是如果所有同学的信息都录入完毕，突然发现某个参数的信息录入错了...因为类之间直接赋值的话，默认的拷贝函数是进行引用赋值的 对于指针的浅复制会造糟糕的结果，这点可以参见C++ primer plus "类和动态内存分配"章节，也可以参见我的另一篇技术博客 C++类的复制构造函数和赋值运算符...4、所属类别：创建型 二、原型模式的C++程序 1 // 原型模式.cpp : 定义控制台应用程序的入口点。

    1.4K50

    深入理解javascript中的继承机制（4）多继承寄生式继承借用构造函数借用构造函数并且复制原型以上

    首先将已有的对象作为新对象的原型，继承它的属性，我们调用了之前的objec函数 然后再给他添加其他属性与方法 借用构造函数 这种继承模式中，就是子对象的构造函数中调用父对象的构造函数，通过apply和...apply方法，将triangle对象传入进去，并传入部分参数。...这样的话，triangle对象会继承Shape构造函数中的属性，但不会继承原型中的属性。...(); Triangle.prototype.name = 'Triangle'; 但这样有一个缺点，我们通过调用父类的构造函数，继承了父类的自身属性，通过原型继承了父类的自身属性和原型，这样自身属性实际上就被覆盖了两次...下面这个模式就可以更好的解决这个问题 借用构造函数并且复制原型 其实解决上面那个自身属性被继承两次的问题也很简单，我们首先调用apply函数继承父类的自身属性，然后在复制原型属性就可以了，这个方法我们之前已经讨论过就是

    67510

    JS中怎么构成原型链的？？？Function Object构造函数.这通通告诉您

    (对象类型), 既然是对象, // 所以也是通过构造函数创建出来的,"所有函数"都是通过Function构造函数创建出来的对象 console.log(Function...__proto__);//指向了Function的原型对象 //总结:函数就是对象,对象是通过构造函数创建出来,那对象(函数)是通过什么构造函数创建出来的?...//只要是原型对象就有constructor,原型对象的constructor指向了之前的Function构造函数....//记住,一切的构造函数都是通过Function构造函数实例化出来的 //既然Person构造函数是通过Function构造函数实例化出来的,那Person一定有__proto__属性...所以"Object构造函数"也有__proto__属性 "Object构造函数"的__proto__属性指向创建它那个构造函数的"原型对象" 5.只要是构造函数都有一个默认的属性

    80120

    如何将没有复制或移动构造函数的对象放入vector容器

    原因是因为std::vector容器的插入一定会调用类对象的构造函数或者移动构造函数。...说一下为什么会有这个问题，因为不想用指针，我想直接通过类对象本身的RAII机制来实现的资源的控制，智能指针是一个解决方案，不过智能指针是写起来很繁琐，终究比不上值类型方便。...不过值类型要用好还是很麻烦的，比如这里的将没有复制或移动构造函数的对象插入到std::vector容器中的问题。 经过查阅资料，总共有四种解决方案： 使用默认构造函数，并且初始化时确定容器大小。...例如： int num = 23; std::vector vec(num); 将std::vector容器中的元素改成智能指针std::unique_ptr。...因此，在插入时std::deque不像std::vector那样需要移动或者拷贝构造，是直接初始化构造在分配的空间中的。

    18050

    面试官：谈谈你对构造函数，原型的理解。我：面试造火箭，工作拧螺丝。

    面试官：谈谈你对构造函数，原型的理解。我：面试造火箭，工作拧螺丝。 我们今天分步走，先把构造函数，以及所谓的原型先走通了，再来进行别的内容的讲解原型链。...我们平常都知道构造函数是什么，但是就是只是浅层的认识，知道怎么写，但是至于原型我们几乎是很陌生的。 构造函数 什么是构造函数呢？...所谓构造，在 js 就是可以使用 new 操作的函数，其实与普通函数没有什么区别，只是我们约定构造函数的首字母必须大写，来区别构造函数与其他函数。...Person() console.log(person.name, person.hobby) constructor 是只构造函数创建实例对象时，此属性会指向该构造函数本身： function Person...指向了它的构造函数，而它和原型的关系我们在之后会链接到一起。

    40520

    JavaScript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象

    一、仔细分析前面的原型模式创建对象的方法,发现原型模式创建对象,也存在一些问题，如下： 1、它省略了为构造函数传递初始化参数这个环节,结果所有实例在默认的情况下都将取得相同的属性值，这还不是最大的问题！...二、组合使用构造函数模式和原型模式 为了解决原型模式不能初始化参数和共享对于引用模式所存在的问题！...这里我们可以采用构造函数模式和原型模式的结合模式来创建自定义类型,构造函数用于与解决初始化参数(实例属性的定义),原型模式用于共享  方法和constructor。...alert(person1.friends); //输出:小超,大超,Stephen Curry,Kevin Durant alert(person2.friends);//输出:小超,大超 通过上面的输出我们发现组合使用构造函数模式和原型模式创建的自定义类型及解决了...1、构造函数:构造函数创建类型相同的函数，确是不同的作用域链和标识符解析(因为在JS中每创建一个函数就是一个对象,所以  (导致了构造函数中的方法)  在不同的实例中都需要重新创建一遍，但是这些方法做的确实同一件事情

    1.3K60

    深入理解javascript中的继承机制 之 12种继承模式总结原型链法仅从原型继承临时构造器原型属性拷贝所有属性拷贝(浅拷贝)深拷贝原型继承法扩展与增强模式多重继承法寄生式继承借用构造函数：构造器于

    中的继承模式 原型链法 示例： Child.prototype = new Parent(); 分类： 使用了原型 基于构造器的继承模式 ** 注意 **： 默认的继承机制 我们可以将需要重用的属性和方法移到原型中...使用了原型链 ** 注意 **： 是前面几种方法的改进，只继承原型对象的属性和方法，自身属性和方法是不继承的 通过uber可以方便的访问到父对象 原型属性拷贝 实例： function extend2...object(victim); that.more = 1; return that; } 分类： 基于对象的工作模式 使用原型链 ** 注意 ** 该方法通过一个类似构造函数的函数来创建对象...该函数会执行对象的拷贝，并可以进行扩展，然后返回对象 借用构造函数： 实例： function Child() { Parent.apply(this, arguments); } 分类： 基于构造函数的模式...,arguments); } extend2(Child,Parent); 分类： 基于构造器模式 使用原型链 属性拷贝 ** 注意 ** 借用构造器与原型属性拷贝的结合 允许在不重复调用父对象构造器的情况下同时继承自身属性和原型属性

    46920

    3. 「vue@2.6.11 源码分析」vue.js 首次执行做了哪些事情

    核心逻辑，通过el获取 template（innerHTML\outerHTML），在调用模板编译方法 compileToFunctions 将 template 转为 render 函数 }...Vue构造函数何其实例方法(定义在原型上) import Vue from '..../instance/index' initGlobalAPI(Vue) // 静态方法和选项的定义 export default Vue Vue构造函数何其实例方法(定义在原型上) 静态方法和选项的定义...【关键】： Vue.extend: 原型继承Vue类，返回一个构造函数Sub，核心点是合并子组件的options的处理 => 相当于每个组件都会生成一个构造函数，并且有一个cid标识 initAssetRegisters...：策略合并 Vue.options 和 mixin 中的选项 Vue.extend：开发者提供选项，通过原型继承来生成组件的构造函数， Vue.component、Vue.componentfilter

    65540

    React+Mobx写法更像Vue了

    计算属性——computed 假如现在我们一个数字，但我们对它的值不感兴趣，而只关心这个数组是否为正数。这个时候我们就可以用到computed这个属性了。...，在实际开发中非常建议用上它，它可以给你带来更多的便捷 好了回到我们的例子，这个类中有一个add函数，用来将number的值加1，也就是修改了被观测的变量，根据规范，我们要在这里使用action来修饰这个...之后只要在父组件需要的地方实例化一个MyState对象，需要用到数据的子组件，只需要将这个实例化的对象通过props传下去就好了。 那如果组件树比较深怎么办呢？...Tips: 简单对象是指不由构造函数创建，而是使用Object作为其原型，或是干脆没有原型的对象。 需要注意，只有对象上已经存在的属性，才能被observable所观测到。...}); 如果是由构造函数创建的对象，那么必须要再它的构造函数中使用observable或extendObservable来观测对象。

    1.6K20

    MobX 和 React 十分钟快速入门

    但这带来了新的问题：数据需要规范化，无法保证引用的完整性，使用原型之类的强大概念几乎是不可能的。 MobX 通过解决根本问题重新简化了 State 管理工作：我们根本无法创建不稳定的 State。...对象，数组，原型，引用组成了你的应用程序的 model。 其次，看看推导（derivations）。讲道理，所有可以通过应用程序 state 自动计算出来的值都算推导。...但是不要担心，MobX 中所有的装饰器对应有 ES5 的形式。 在构造函数中，我们创建了一个小函数来打印 report 并用 autorun 包裹它。...mobx-react 包的 @observer 装饰器通过将 React 组件的 render 方法包裹在 autorun 中解决了这一问题，它自动地保持你的组件和 state 同步。...@computed 装饰器可被用于创建基于 state 自动计算值的函数。 使用 autorun 来自动地运行依赖于 observable state 的函数。

    1.2K30

    Angular 从入坑到挖坑 - HTTP 请求概览

    ; @Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类中...; @Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类中...; @Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类中...; @Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类中...; } } 当请求发生错误时，通过在 HttpClient 方法返回的 Observable 对象中使用 pipe 管道将错误传递给自定义的错误处理器，从而完成捕获错误信息的后续操作 ?

    5.3K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券