3分钟理清JavaScript “构造函数、对象、原型”的关系

是不是觉得“构造函数、对象、原型”三者之间指来指去,又是prototype、又是__proto__,还有个constructor,关系剪不断理还乱?
本文介绍构造函数、对象、原型的概念和他们之间的关系,先上结论:

0. 三者关系图

image

1. 构造函数

是对象的模板,在创建对象的时候用new执行

JS构造函数和java类的比较

  1. java的类
    • 类是对象的模板
    • 类里面有构造函数(自定义或默认),new的时候只执行构造函数
  2. JS的构造函数
    • 构造函数是对象的模板
    • 这个函数就是全部,new的时候执行这个函数全部内容

2. 对象

new执行构造函数后生成的实体,有构造函数、原型的属性、方法

3. 原型

  • 是一个对象

  • 每个函数都默认有prototype属性(构造函数当然也有),属性值就是这个对象

  • 如何称呼?构造函数Person,new了一个对象 xiaoming、xiaohong,则Person的prototype属性,称为xiaoming的原型、xiaohong的原型

function Person() {

}

var xiaoming = new Person();

var xiaohong = new Person();

console.log(xiaoming.__proto__ === Person.prototype);  // true

console.log(xiaohong.__proto__ === Person.prototype);  // true

  • 构造函数的prototype属性指向了这个对象(xxx的原型),这个对象的constructor属性指回构造函数(没有指回对象xxx的)

console.log(Person===Person.prototype.constructor);//true

参考:
1. 构造函数、对象、原型三者关系
2. 构造函数、new、this详解

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一切皆对象 js中的一个常见运算符 typeof 以上代码列出了 typeof 输出的集中类型标识, 其中上面的四...
    无迹落花阅读 2,045评论 0 5
  • 作者:茄果 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效...
    ilkswiss阅读 771评论 0 0
  • 什么是原型语言 只有对象,没有类;对象继承对象,而不是类继承类。 “原型对象”是核心概念。原型对象是新对象的模板,...
    zhoulujun阅读 2,355评论 0 12
  • 将辣椒面500克,桂皮10克,香叶3克,丁香2克,白蔻2克,陈皮5克,紫草5克,八角5克,罗汉果一个,芝麻50克,...
    樂栗子阅读 131评论 0 0
  • 但是没有人愿意说我很害怕,所以他们骗自己说,“我根本不感兴趣!” 他们不是缺乏能力,也不是缺乏机会,他们缺乏的只是...
    小狮子在路上阅读 231评论 0 0