参考解释:

对象原型

构造函数与实例对象

构造函数与实例对象

关系:

  实例对象是通过构造函数来创建的,创建的过程叫实例化。

示例代码:

//1.自定义构造函数
function Person(name,age){// 当使用 new 操作符调用 Person() 的时候,实际上这里会先创建一个对象// var instance = {}// 然后让内部的 this 指向 instance 对象// this = instance// 接下来所有针对 this 的操作实际上操作的就是 instancethis.name=namethis.age=agethis.play=function(){console.log('play games')console.log(this.name)}// 在函数的结尾处会将 this 返回,也就是 instance// return this

}//2.创建对象
let per = new Person('小白',10)
per.play()

console.dir(per)//输出实例对象
//Person

console.dir(Person)//输出构造函数
//ƒ Person(name,age)

console.log(per.constructor)//per这个实例对象的构造器(构造函数)
/*
*ƒ Person(name,age){
*   this.name=name
*    this.age=age
*    this.play=function(){
*        console.log('play games')
*    }
*}
*/

//判断对象具体类型的两种方法

console.log(per.constructor===Person)//true
console.log(per instanceof Person)//true//一个实例对象的构造器不一定是自己的构造器,有可能是Object;因此推荐第二种方法

(1)1到2的过程就叫实例化对象的过程,即对象实例化
(2)per这个对象的构造函数就是Person

原型对象

__proto__与prototype

console.log(per.__proto__.constructor===Person)//true
console.log(per.__proto__.constructor===Person.prototype.constructor)//true

关于构造函数内存浪费的问题,通过原型添加方法解决,实现数据共享

function Person(name,age){this.name=namethis.age=agethis.play=function(){console.log('play games')}this.say=function(){console.log('hi')}
}let per1=new Person('小白',10)
let per2=new Person('小黄',8)
per1.play()
per2.play()
console.log(per1.play === per2.play) //false  指向不同的空间,其中的内容一样,内存浪费//原型添加方法解决数据共享function Person(name,age){this.name=namethis.age=age
}
Person.prototype.play=function(){console.log('play games')
}
Person.prototype.say=function(){console.log('hi')
}//==可写成==
function Person(name,age){this.name=namethis.age=age
}
Person.prototype={  constructor:Student,play:function(){console.log('play games')},say:function(){console.log('hi')}
}let per1=new Person('小白',10)
let per2=new Person('小黄',8)
per1.play()
per2.play()
console.log(per1.play === per2.play) //true 指向同一空间,内存节省

 对原型对象的理解:

实例对象中,有__proto__属性,也是对象,称为原型,不是标准的属性,浏览器使用,IE8不支持

构造函数中,有prototype属性,也是对象,称为原型,是标准属性,程序员使用

__proto__和prototype都是原型对象

原型作用之一:实现数据共享,节省空间

构造函数、实例对象、原型对象之间的关系

解释理解:

构造函数有prototype属性(先这么理解),即为原型对象;
原型对象中的constructor构造器就是构造函数本身;

构造函数创建实例对象;
实例对象中有__proto__属性(先这么理解);
__proto__共用构造函数prototype中的方法

代码示例

总结

1.构造函数可以实例化对象

2.构造函数中有一个属性:prototype,是构造函数的原型对象

3.构造函数的原型对象(prototype)中有一个cunstructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数

4.实例对象的原型对象(__proto__)指向的是该构造函数的原型对象,prototype中的方法共享给实例对象

5.原型对象中的添加的方法可以相互调用

6.实例对象使用的属性或方法,先在实例中查找,找到了则直接使用,找不到则去实例对象的__proto__指向的原型对象prototype中找,找到则使用,找不到则报错。示例代码:

补充:

原型指向可以改变

function Per (age){this.age=age
}
Per.prototype.say=function(){console.log('say111')
}function Stu(){
}
Stu.prototype.eat=function(){console.log('eat111')
}Stu.prototype = new Per(10)let stu = new Stu()
stu.say()//say111

理解:

实例对象的原型__proto__指向的是该对象所在的构造函数的原型对象prototype;

构造函数的原型的指向改变了,实例对象的原型的指向也会跟着构造函数的原型的指向发生改变(人家是一条链上的);

实例对象和原型对象是通过__proto__联系起来的。

待补充待补充待补充......

转载于:https://www.cnblogs.com/BUBU-Sourire/p/11263269.html

面向对象2(构造函数、实例对象、原型对象——关系理解)相关推荐

  1. 构造函数、实例、原型对象、继承

    一.构造函数与原型对象之间的关系: 有一个Star构造函数,每一个构造函数里面都有一个原型对象,是通过构造函数的prototype指向这个原型对象的 同样在这个原型对象里面也有一个属性叫constru ...

  2. 初学JavaScript:js中的对象(对象+原型对象)

    文章目录 js对象详解 1.创建对象 字面量模式创建对象 构造函数模式创建对象 2.访问对象 访问属性 访问方法 3.遍历对象中的属性和属性值 4.往对象中新添属性 5.删除对象中的属性 6.Obje ...

  3. js_高级_对象、面向对象、构造函数、实例对象、原型、原型链

    1.什么是对象 汽车不是对象是是一类事物,一辆汽车是对象. 2.什么是面向对象 3.面向对象的特点 案例来理解  面向过程 和 面向对象---打印出学生的成绩表 面向过程:如何做这件事情 ,把事情拆成 ...

  4. JavaScript 进阶 35 -- 构造函数、原型对象、实例之间的关系详解

    说到继承 ,先要弄明白 :构造函数.原型对象.实例之间的关系. 先来了解几个简单的概念: 构造函数:通过 关键字 new 来调用的 函数,var p = new Person():Person就称为构 ...

  5. javascript面向对象系列第一篇——构造函数和原型对象

    前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如何用构造函数和原型对象来创建对象 构造函数 构造函数是 ...

  6. JS高级进阶总结day01---面向对象编程介绍,new的工作原理以及构造函数,原型对象,实力函数三者之间的关系

    02-面向对象编程 1.1-面向对象编程介绍 本小节知识点 1.理解什么是面向对象编程 面向对象不是一门技术,而是一种解决问题的思维方式 面向对象的本质是对面向过程的一种封装 2.理解什么是对象 对象 ...

  7. JavaScript进阶-编程思想、构造函数的原型对象、对象原型、原型继承以及原型链

    编程思想 面向过程 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次 调用就可以了. 优点: 性能比面向对象高,适合跟硬件联系很紧密 的东西,例如单 ...

  8. 读书笔记--对象、实例、原型、继承

    创建对象的设计模式 工厂模式 抽象了创建具体对象的过程,用函数封装以特定接口创建对象的细节 解决了创建多个相似对象的问题,没有解决对象识别的问题 function createPerson(name, ...

  9. 深入理解Javascript中构造函数和原型对象的区别

    在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...

最新文章

  1. forward、redirect、浏览器的路径问题
  2. addShutdownHook钩子
  3. 利用信号进行进程之间的通信
  4. [源码]解析 SynchronousQueue 上界,下界.. 数据保存和数据传递. 堵塞队列. 有无频繁await?...
  5. 彻底理解cookie、session、token
  6. 我做的小学二年级公开课《生命,生态和安全》的教案
  7. BroadcastReceive之ip拨号
  8. 了解jvm自动内存分配和内存自动回收的重要性
  9. ggplot2箱式图两两比较_第十九章_使用ggplot2进行高级绘图
  10. controller属于哪一层_孺教网分享|家长层次有五层,家长们都来看看,你属于哪一层?...
  11. VS2013 异常处理
  12. G - 数据结构实验之链表五:单链表的拆分
  13. 页脚保持在未满屏页面的底部
  14. asp.net的10个提升性能或扩展性的秘密(二)
  15. css就近原则_CSS 三大特性
  16. vue.js实现自定义输入分页
  17. python删库命令_python3 删除数据库
  18. background-size失效
  19. Linux下Docker命令自动补全
  20. C语言编程轰炸,利用C语言编写一个数字炸弹小游戏

热门文章

  1. 合泰单片机做电压表_合泰单片机总结
  2. 学习阶段C语言程序汇总
  3. Y - 献给杭电五十周年校庆的礼物
  4. 宇视设备搜索工具_【聚焦】2019版中国纸箱行业供应商搜索引擎、全球瓦楞行业设备前沿技术报告将于4月瓦楞展现场首发!...
  5. 蓝桥杯 试题 算法训练 筛选号码 Java
  6. matlab 大数,在Matlab中考虑大数,然后得到结果中的数字
  7. background-size中,100%和cover的区别
  8. 移动端Swiper的一些尝试(中间完整,两边有内容,循环展示)
  9. ActionScript菜鸟教程
  10. 英语学习网站php,英语学习网站