1.1 概述

在典型的 OOP 的语言中(如 Java),都存在类的概念,类就是对象的模板,对象就是类的实例,但在 ES6之前, JS 中并没用引入类的概念
ES6, 全称 ECMAScript 6.0 ,2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。
在 ES6之前 ,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特征。

创建对象可以通过以下三种方式:

  1. 对象字面量
  2. new Object()
  3. 自定义构造函数
         // 1. 利用 new Object() 创建对象var obj1 = new Object();// 2. 利用 对象字面量创建对象var obj2 = {};// 3. 利用构造函数创建对象function Star(uname, age) {this.uname = uname;this.age = age;this.sing = function() {console.log('我会唱歌');}}var ldh = new Star('刘德华', 18);var zxy = new Star('张学友', 19);console.log(ldh);ldh.sing();zxy.sing();

1.2 构造函数

构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

在 JS 中,使用构造函数时要注意以下两点:

  1. 构造函数用于创建某一类对象,其首字母要大写
  2. 构造函数要和 new 一起使用才有意义

new 在执行时会做四件事情:
1)在内存中创建一个新的空对象。
2)让 this 指向这个新的对象
3)执行构造函数里面的代码,给这个新对象添加属性和方法。
4)返回这个新对象(所以构造函数里面不需要 return )。

JavaScript 的构造函数中可以添加一些成员,可以在构造函数本身上添加,也可以在构造函数内部的 this 上添加。通过这两种方式添加的成员,就分别称为静态成员和实例成员。

静态成员:在构造函数本上添加的成员称为静态成员只能由构造函数本身来访问
实例成员:在构造函数内部创建的对象成员称为实例成员只能由实例化的对象来访问

静态成员和实例成员:

// 构造函数中的属性和方法我们称为成员, 成员可以添加function Star(uname, age) {this.uname = uname;this.age = age;this.sing = function() {console.log('我会唱歌');}}var ldh = new Star('刘德华', 18);// 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员// 实例成员只能通过实例化的对象来访问console.log(ldh.uname);ldh.sing();// console.log(Star.uname); // 不可以通过构造函数来访问实例成员// 2. 静态成员 在构造函数本身上添加的成员  sex 就是静态成员Star.sex = '男';// 静态成员只能通过构造函数来访问console.log(Star.sex);console.log(ldh.sex); // 不能通过对象来访问

1.3 构造函数的问题

构造函数方法很好用,但是存在浪费内存的问题

1.4 构造函数原型 prototype

构造函数通过原型分配的函数是所有对象所共享的
JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象。注意这个 prototype 就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。

我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。

问答?

  1. 原型是什么 ?
    一个对象,我们也称为 prototype 为原型对象。
  2. 原型的作用是什么 ?
    共享方法

1.5 对象原型 __proto__

对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有 __proto__ 原型的存在。
__proto__对象原型和原型对象 prototype 是等价的
__proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象 prototype

1.6 constructor 构造函数

对象原型( __proto__和构造函数(prototype)原型对象里面都有一个属性 constructor 属性 ,constructor 我们称为构造函数,因为它指回构造函数本身。
constructor 主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。
一般情况下,对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法,我们可以给原型对象采取对象形式赋值,但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时,我们可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数。

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

1.8 原型链


1.9 JavaScript 的成员查找机制(规则)

  1. 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
  2. 如果没有就查找它的原型(也就是 __proto__指向的 prototype 原型对象)。
  3. 如果还没有就查找原型对象的原型(Object的原型对象)。
  4. 依此类推一直找到 Object 为止(null)。
  5. __proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线。



1.10 原型对象this指向

构造函数中的this 指向我们实例对象.
原型对象里面放的是方法, 这个方法里面的this 指向的是 这个方法的调用者, 也就是这个实例对象.

1.11 扩展内置对象

可以通过原型对象,对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。

注意:数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = {} ,只能是 Array.prototype.xxx = function(){} 的方式。

JavaScript高级之构造函数和原型相关推荐

  1. JavaScript高级 |彻底搞懂原型对象

    本文已收录于专栏 ⭐️ <JavaScript>⭐️ 学习指南: 对象的原型 函数的原型 new操作符 将方法放原型里 constructor 总结梳理 原型对象 内存表现 完结散花 参考 ...

  2. 34 JavaScript中的构造函数和原型

    技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.概述 在典型的OOP语言中(如Java),都存在类的概念.类就是对象的模板,对象就是类 ...

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

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

  4. JavaScript中的构造函数、原型和实例

    1.原型模式: 每个函数都会创建一个prototype属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法.实际上,这个对象就是通过构造函数创建的对象的原型. 使用原型对象的好处是, ...

  5. 【笔记】JavaScript高级篇——面向对象、原型、继承

    原文链接:http://www.hansmkiii.com/2018/07/06/javascript-node-1/ " 面向对象.原型.继承 " 1.面向对象 1.1 什么是面 ...

  6. Javascript深入理解构造函数和原型对象

    1.在典型的oop的语言中,如java,都存在类的概念,类就是对象的模板,对象就是类的实例.但在js中不存在类的概念,js不是基于类,而是通过构造函数(constructor)和原型链(propoty ...

  7. JavaScript高级笔记_002_构造函数和原型

    JavaScript高级笔记_002_构造函数和原型 构造函数和原型 构造函数和原型 概述 构造函数 构造函数的问题 构造函数原型`prototype` 对象原型`__proto__` (四个下划线) ...

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

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

  9. 《javascript高级程序设计》笔记:原型图解

    文章直接从原型图解开始的,如果对一些概念不太清除,可以结合后面几节查看 1. 图解原型链 1.1 "铁三角关系"(重点) function Person() {}; var p = ...

最新文章

  1. 要做服务和酒店行业的“领英” ,Industry 获得230万美元种子轮融资
  2. ORACLE日期加减【转】
  3. jQuery:从零开始,DIY一个jQuery(2)
  4. 矩池云升级JupyterLab版本教程
  5. 软件产品三步曲(内容、可用性、视觉)
  6. 0基础学python做什么工作好-零基础自学python到什么程度才有机会去小公司实习?...
  7. UI中经常出现的下拉框下拉自动筛选效果的实现
  8. 通过CuteFTP用VBScript使用SFTP,实现Win与Linux的文件传输
  9. web渗透测试----14、CSRF(跨站请求伪造攻击)
  10. PS CS5应用抽出滤镜为MM抠图换背景的教程
  11. 视频教程-C语言编程初级入门-C/C++
  12. python参数类型为uint8_Python 改变数组类型为uint8的实现
  13. WIndows禁用笔记本键盘
  14. Spring Cloud 如何统一异常处理?写得太好了!
  15. (附源码)mysql+ssm学生选课系统 毕业设计 170920
  16. 菜鸟学JAVA之——常用类(StringBuffer、StringBuilder、Comparable、Comparator等)
  17. 为什么我们需要关注基于 EIP-3664 标准的可拆分,可组合的NFT?
  18. 使用ESP8266通过Blinker平台接入天猫精灵控制电视/空调
  19. filezilla显示无法连接服务器,FileZilla 错误:无法连接到服务器
  20. 醇香即刻到手,Barsetto百胜图BAV02自助咖啡机

热门文章

  1. 【python】pycharm启动 一直index,无法运行
  2. loewe测试软件,实测Loewe三角包 最轻的小包最贴心的设计
  3. html+监听+页面滚动到底部,解决HTML5中滚动到底部的事件问题
  4. hystrix 单独使用_使用Hystrix对Dubbo消费者提供线程隔离保护
  5. OpenCL向量相加
  6. python 将一个字符list的列表扁平化成了一个list
  7. 王译潇20162314 第九周作业总结
  8. 你不知道的 字符集和编码(编码字符集与字符集编码)
  9. 在Visual Studio中利用NTVS创建Pomelo项目
  10. 数据冗余的理解和相关概念