首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

69920

详解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.3K20

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

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

    63510

    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函数继承父类自身属性,然后在复制原型属性就可以了,这个方法我们之前已经讨论过就是

    67610

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

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

    80220

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

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

    18650

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

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

    40720

    深入理解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); 分类: 基于构造器模式 使用原型链 属性拷贝 ** 注意 ** 借用构造器与原型属性拷贝结合 允许在不重复调用父对象构造情况下同时继承自身属性和原型属性

    47120

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

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

    1.4K60

    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

    66240

    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
    领券