美文网首页程序员
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详解

    相关文章

      网友评论

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

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