美文网首页程序员
3分钟理清JavaScript “构造函数、对象、原型”的关系

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

作者: FengxuWang | 来源:发表于2018-10-26 16:24 被阅读0次

是不是觉得“构造函数、对象、原型”三者之间指来指去,又是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详解

相关文章

  • JavaScript 常用继承方式

    JavaScript 常用继承方式 原型链继承构造函数,原型,实例之间的关系:每个构造函数之间都有一个原型对象,原...

  • 构造函数和原型对象

    javascript使用构造函数和原型对象来进行面向对象编程 构造函数 在 JavaScript 中,构造器其实就...

  • 原型与原型链

    构造函数与原型 JavaScript 语言使用构造函数(constructor)作为对象的模板。所谓”构造函数”,...

  • js关于继承

    Javascript是一门基于原型链的语言构造函数,原型属性与实例对象三者的关系: Person 是一个构造函数(...

  • 原型链

    构造函数、原型、实例的关系 通过构造函数创建实例 每个构造函数都有一个原型对象 原型对象到包含一个指向构造函数的指...

  • 面试5:原型链

    课程思维导图 Q:JavaScript如何创建对象? Q:原型、构造函数、实例、原型链的关系如何? [图片上传失败...

  • 继承

    构造函数、原型和实例的关系: 每个构造函数都有其对应的原型对象;每个原型对象都有一个构造函数指针construct...

  • JavaScript原型(二)

    原型链 在JavaScript原型(一)中,我们介绍了每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数...

  • 2018-11-22

    JavaScript的面向对象是基于constructor(构造函数)与prototype(原型链)的。 构造函数...

  • 22

    JavaScript的面向对象是基于constructor(构造函数)与prototype(原型链)的。 构造函数...

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/qchltqtx.html