秒懂JS对象、构造器函数和原型对象之间的关系

学习JS的过程中,想要掌握面向对象的程序设计风格,对象模型(原型和继承)是其中的重点和难点,拜读了各类经典书籍和各位前辈的技术文章,感觉都太过高深,花费了不少时间才搞明白(个人智商是硬伤/(ㄒoㄒ)/~~),这里略作总结尽量通俗易懂。

一、基本概念

  1、对象:属性和方法的集合,即变量和函数的封装。每个对象都有一个__proto__属性,指向这个对象的构造函数的原型对象

  2、构造器函数:用于创建对象的函数,通过new关键字生成对象。函数名一般首字母大写的。

  3、原型对象:每个函数都有一个prototype属性,它是一个指向原型对象的指针(原型对象在定义函数时同时被创建)

二、创建对象的方法

  1、使用构造函数和原型对象共同创建

如上图,构造器函数Person(),通过new关键字创建了两个实例化对象p1、p2,这两个新对象都继承了,构造器Person()函数prototype属性所指向的原型对象。通过构造函数创建实例对象p1和p2的时候,其中name、age、job这些是通过构造函数生成的(本地部分),sayName方法是通过继承原型对象来实现共享的(远程部分),这样多个实例对象都是由本地(私有)和远程(共享)两部分组成。还是不清楚,没关系我们上代码。

function Person(name, age, job){//构造器函数
    this.name = name;
    this.age = age;
    this.job = job;
}
Person.prototype = {//设置构造器函数prototype指定的对象,即重置原型对象
    constructor : Person,
    sayName : function(){alert(this.name);}
}
var p1 = new Person("Tom", 29, "Teacher");//实例化对象p1
//{name:"Tom",age:29,job:"Teacher",__proto__:object},object即原型对象:Person.prototype指向的对象
var p2 = new Person("Jack", 27, "Doctor");//实例化对象p2
//{name:"Jack",age:27,job:"Doctor",__proto__:object}

  2、仅使用原型对象创建

如上图,使用Object.create方法从原型对象直接生成新的实例对象,新对象p1继承原型对象的属性和方法,但是这里没有用到构造函数

var person={ classname:'human'}//将这个对象当做原型
var p1=Object.create(person)//生成实例对象
console.log(p1.classname)//human,相当于p1.__proto__.classname

这样表述还是感觉有些生硬,来点更形象的比喻吧~

构造函数是妈,原型对象是爸,实例对象是孩子。妈让每个孩子拥有私有能力,爸让它们拥有共有能力(这个共有能力其实都是爸代劳的/(ㄒoㄒ)/~~);没有构造函数的情况下,可以直接理解为克隆哦~怎么样,这样应该能理解三者之间的关系了吧。

当然创建对象的方法远不止这两种,这里有九种创建对象方法,oh no?我只想要个对象,为什么这么复杂?为了优化代码,这个理由足够吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开发与安全

从零开始学C++之类与对象:类声明、类作用域、前向声明、this指针、嵌套类、PIMPL 技法 等

一、类声明 //类是一种用户自定义类型,声明形式: class 类名称 {    public:              公有成员(外部接口)   ...

2050
来自专栏C/C++基础

Google C++编程风格指南(三)之作用域的相关规范

C++在C的基础上引入了名字空间机制,使C中作用域的级别从原有的文件域(全局作用域)和局部域(函数作用域和代码块作用域)中间增加了名字空间域和类域。

733
来自专栏Java帮帮-微信公众号-技术文章全总结

第五天 方法【悟空教程】

1787
来自专栏杨熹的专栏

Day 1-Java-imooc-4.流程控制语句

课程地址:http://www.imooc.com/learn/85 总结图片来自 http://www.imooc.com/article/10535 ? 本...

3365
来自专栏C语言及其他语言

实例说明

上一节,我们大致总揽了一个简单C程序的框架,程序如下: #include<stdio.h> /*引入头文件*/ int main(void) /*一个简单的C程...

2668
来自专栏有趣的Python

4-Java面向对象-继承(上)

此时猫和狗直接继承父类将可以直接使用父类的这些成员属性和方法。此时子类当中的方法就可以只写子类所特有的东西。

971
来自专栏Albert陈凯

Scala Collections集合的几个重要概念

几个重要的概念 谓词是什么(What a predicate is) A predicate is simply a method, function, or...

2233
来自专栏菜鸟前端工程师

JavaScript学习笔记022-原型链0原型继承0对象的深浅拷贝extends

521
来自专栏专注 Java 基础分享

Java 内部类的意义及应用

众所周知,我们的 C++ 程序语言是多继承制的,而多继承明显的好处就是,相对而言只需要写较少的代码即可完成一个类的定义,因为我们可以通过继承其它类来获取别人的实...

3074
来自专栏偏前端工程师的驿站

(cljs/run-at (->JSVM :browser) "语言基础")

前言  两年多前知道cljs的存在时十分兴奋,但因为工作中根本用不上,国内也没有专门的职位于是搁置了对其的探索。而近一两年来又刮起了函数式编程的风潮,恰逢有幸主...

1977

扫码关注云+社区