专栏首页web前端记录原型和原型链
原创

原型和原型链

prototype(原型):prototype是Function对象的一个属性,它定义了构造函数制造出的对象的公用祖先(属性和方法),可以继承该原型的属性和方法。原型也是对象。

__proto__(隐式原型):没个对象的__proto__属性指向自身构造函数的prototype。

constructor(构造器):返回对创建此对象的数组函数引用。

原型链基本概念:每个对象都会在其内部初始化一个属性,就是 proto,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去proto里找这个属性,这个proto又会有自己的proto,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。

原型链--实现对象间的联系即继承的方法

//es5写法
var Person = function(name,age){
  this.name = name;
};
Person.prototype.sayName = function() {
  console.log('my name is'+this.name)
};
Person.prototype.age = 18;
var person = new Person();
person.sayName('jade');
//ES6写法:
class Person {
    constructor(name,age){
        this.name = name;
        this.age = age
    }
    sayName(){
        console.log(`my name is ${this.name}`)
    }
}
let person = new Person('jade', 18);
person.sayName()

//ES6的继承
class Son extends Person{
    constructor(){
        super();
    }
}

添加描述

// 结果
console.log(person.__proto__===Person.prototype); // true
console.log(person.constructor === Person); // true
console.log(Person.property.constructor === Person)
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.constructor === Object) // true
console.log(Object.prototype.__proto__ === null) // true

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 原型和原型链

    function Foo(){} 相当于 var Foo = new Function(){}

    ConardLi
  • 图解原型和原型链

    原型和原型链是 JS 中不可避免需要碰到的知识点?,本文使用图片思维导图的形式缕一缕原型、原型链、实例、构造函数等等概念之间的关系?

    JS菌
  • 强大的原型和原型链

    前两次总结了JavaScript中的基本数据类型(值类型<引用类型>,引用类型<复杂值>)以及他们在内存中的存储,对内存空间有了一个简单的了解,以及第二次总结了...

    okaychen
  • 强大的原型和原型链

    前两次总结了JavaScript中的基本数据类型(值类型<引用类型>,引用类型<复杂值>)以及他们在内存中的存储,对内存空间有了一个简单的了解,以及第二次总结了...

    okaychen
  • JS中的原型和原型链

    2、所有的引用类型都有一个’_ proto _'属性(也叫隐式原型,它是一个普通的对象)。

    ZEHAN
  • JS中的原型和原型链

    JavaScript规定,每一个函数都有一个prototype对象属性,指向另一个对象。prototype对象属性的所有属性和方法都会被构造函数的实例继承。这意...

    Cloud-Cloudys
  • 【JS】479- 又见原型和原型链

    在前端这块领域,原型与原型链是每一个前端er必须掌握的概念。我们多次在面试或者一些技术博客里面看见这个概念。由此可见,这个玩意对于前端来说有多重要。其实它本身理...

    pingan8787
  • JavaScript原型和原型链( prototype 与 __proto__ )

    var a = new A; //a 类型:对象 //A 类型:函数 var Object = new Function(); //var 对象 = new...

    Leophen
  • 重新认识原型和原型链三

    知道了显式原型prototype和隐式原型__proto__,我们就能很好的知道原型链是什么东西了。

    wade
  • 重新认识原型和原型链二

    知道了prototype这个原型(也叫原型属性、原型对象,不要搞混了,原型、原型属性、原型对象都是同一个东西),我们还需要知道__proto__和constru...

    wade
  • 重新认识原型和原型链一

    之前分享过原型和原型链,那时候觉得理解的还行,最近重新理了一遍原型和原型链,发现当时理解的好粗浅。于是又重新学了一遍。可能这次学习的还是不到位,只是分享一些新的...

    wade
  • 原型和原型链 prototype和proto的区别

    原型是function对象下的属性,它定义了构造函数的共同祖先,也就是一个父子级的关系,子对象会继承父对象的方法和属性

    小丞同学
  • 总结一下js的原型和原型链

    最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数   Js所有的函数都有...

    吴裕超
  • 构造对象,原型和原型链笔记

    面向对象:面向对象、原型 对原型、原型链、 Function、Object 的理解 什么是 JS 原型链? 转载以上文章

    bamboo
  • 原来你是这样的---原型和原型链

      把JS的原型和原型链重新梳理了一遍,然后动手绘制了一张流程图,原型和原型链的秘密就藏在这张图上。绘制流程图的好处就是在绘制的过程中,既检验自己对这个知识点的...

    tandaxia
  • 一篇文章让你搞懂原型和原型链

    与多数面向对象的开发语言有所不同,虽然JavaScript没有引入类似类的概念(ES6已经引入了class语法糖),但它仍然能够大量的使用对象,那么如何将所有对...

    葡萄城控件
  • 三张图轻松KO⚡ JS 原型和原型链

    原型和原型链据说是面试常考的东西(没面试过,不大清楚),对于初学者来说有一定的难度,但是其实它也非常的简单,几个概念理解好了就没什么问题了,我们先从一个例子出发...

    小丞同学
  • 上帝视角一文理解JavaScript原型和原型链

    本文将从上帝角度讲解JS的世界,在这个过程中,大家就能完全理解JS的原型和原型链是什么,之后还会基于原型和原型链知识拓展一些相关知识。

    dellyoung
  • 关于javascript的原型和原型链,看我就够了(二)

    Object就是一个构造函数,是js内置的构造函数,上面的例子中Object就是obj的构造函数,这个例子似乎不太明显,我们继续看

    陌上寒

扫码关注云+社区

领取腾讯云代金券