8-js高级-3

news/2024/11/30 7:55:47/

JavaScript 进阶 - 3

了解构造函数原型对象的语法特征,掌握 JavaScript 中面向对象编程的实现方式,基于面向对象编程思想实现 DOM 操作的封装。

  • 编程思想
  • 构造函数
  • 原型
  • 综合案例

编程思想

学习 JavaScript 中基于原型的面向对象编程序的语法实现,理解面向对象编程的特征。

面向过程

面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次

调用就可以了。

举个栗子:蛋炒饭
在这里插入图片描述

面向对象

面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。

在这里插入图片描述

在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工。

面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项目。

面向对象的特性:

  • 封装性

  • 继承性

  • 多态性

编程思想对比

面向过程

优点:性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程。

缺点:不灵活、复用性较差

面向对象

优点:易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统 更加灵活、更加易于维护

缺点:性能比面向过程低

生活离不开蛋炒饭,也离不开盖浇饭,选择不同而已,只不过前端不同于其他语言,面向过程更多

构造函数

封装是面向对象思想中比较重要的一部分,js面向对象可以通过构造函数实现的封装

把公共的属性和方法抽取封装到构造函数里面来实现数据的共享,这样创建的实例对象可以使用这些属性和方法了

<body><script>// 1. 构造函数实现封装,封装人的姓名、年龄和 sayHi方法function Person(name, age) {this.name = namethis.age = agethis.sayHi = function () {console.log('hi~')}}// 实例化const zs = new Person('张三', 18)const ls = new Person('李四', 19)console.log(zs)console.log(ls)console.log(zs === ls)  // false // 2. 构造函数实现封装有个小问题console.log(zs.sayHi === ls.sayHi)  // false 两个函数不一样</script>
</body>

总结:

  1. 构造函数体现了面向对象的封装特性
  2. 构造函数实例创建的对象彼此独立、互不影响

封装是面向对象思想中比较重要的一部分,js面向对象可以通过构造函数实现的封装。

前面我们学过的构造函数方法很好用,但是 存在浪费内存的问题

原型

原型对象-prototype

是什么?JavaScript 规定,每一个构造函数都有一个prototype属性,指向另一个对象,所以我们也称为原型对象

什么是继承:

父对象中的成员,子对象无需重复创建,就可直接使用!

何时:

同一类型的所有子对象,都需要相同的方法定义或属性值时,都会用继承的方式来实现。

如何:

  1. (自动,不需要你手写!) 其实当我们定义一个构造函数时,js程序都会自动赠送我们一个原型对象(prototype),也称为该类型下所有孩子的父对象。

  2. 什么是原型对象(prototype):替所有子对象保存共有方法和属性值的父对象

  3. (自动,不需要你手写!) 当new一个新对象时,new的第二步是自动让新子对象继承构造函数的原型对象。自动设置子对象的、__proto__属性指向构造函数的原型对象

    新子对象._proto_ = 构造函数.prototype

  4. 结果,将来用子对象试图访问一个子对象没有的共有方法或属性时,js程序先在子对象自身内部查找。如果子对象内部没有,js程序会自动延 __proto__向父对象(原型对象)中查找是否包含要用的方法或属性。只要在父对象(原型对象)中找到想要的方法,依然可以用"子对象.共有方法名()"调用。看起来就像子对象在用自己的方法一样!

  5. 问题: 构造函数的原型对象开始时是空的!如何向原型对象中添加共有属性和方法?——唯一的办法只有“强行赋值”!

    构造函数.prototype.共有方法名=function(){ … }

总结:

今后,只要所有子对象都要共有的方法或属性值,都要集中保存在构造函数的原型对象中!

问题:

问:为什么指同一个原型对象,从构造函数访问时,要用prototype属性,而从子对象访问时却要用_proto_ 。构造函数的prototype属性和子对象的 proto 指的到底是不是同一个对象呢?
答: prototype和_proto_,指的是同一个对象。只不过,通过不同辈分的其它对象访问同一个原型对象时,称呼不同!

问题:

问:原型对象中的this指谁?

(1). 错误: 因为构造函数.prototype.共有方法=function(){ … }
所以共有方法中的this指.前的原型对象!
因为: 这句话只是向原型对象中添加函数,并不是调用共有方法。

(2). 正确: 判断this不要看定义在哪儿,应该看何时被谁调用!
因为共有方法迟早会被"子对象.共有方法()"调用。所以,共有方法中的this不确定。但是肯定指将来正在调用这个共有方法的.前的某个子对象。

自有属性和共有属性:

	(1). 什么是: a. 自有属性: 保存在当前对象内部,仅归当前对象自己所有的属性b. 共有属性: 保存在原型对象(父对象)中,归多个子对象共有的属性(2). 获取属性值: 无论自有属性,还是共有属性,都可用"子对象.属性名",用法是相同的!(3). 修改属性值: a. 自有属性: 应该用子对象直接修改。子对象.自有属性名=属性值b. 共有属性: 1). 错误: 用子对象.共有属性方式=新值因为: 共有属性归所有子对象共用,如果允许某一个子对象擅自篡改,则牵一发而动全身!——危险!所以: js禁止子对象修改原型对象中的共有属性但是: 如果强行用子对象.共有属性=新值,js程序会自动给这个子对象添加一个自有的同名属性保存新属性值。而不会影响原型对象中的共有属性结果: 从此,这个子对象,在这个共有属性的使用上,与其他子对象,分道扬镳!2). 正确: 共有属性,只能用原型对象修改: 构造函数.prototype.共有属性=新值

使用场景:

可以解决:构造函数封装时函数(方法)会多次创建,占用内存的问题

原型对象可以挂载函数,对象实例化不会多次创建原型对象里面的函数,节约内存

<body><script>// 1. 构造函数实现封装,封装人的姓名、年龄和 sayHi方法function Person(name, age) {this.name = namethis.age = age// this.sayHi = function () {//   console.log('hi~')// }}Person.prototype.sayHi = function () {console.log('hi~')}console.log(Person.prototype)  // 原型对象// 实例化const zs = new Person('张三', 18)const ls = new Person('李四', 19)zs.sayHi()ls.sayHi()// console.log(zs)// console.log(ls)// 构造函数实现封装有个小问题console.log(zs.sayHi === ls.sayHi)  //  true</script>
</body>

构造函数和原型对象中的this 都指向实例化的对象

  1. 箭头函数不能做构造函数,因为箭头函数里面没有this
  2. 原型对象里面的函数如果需要用到this,也不要用箭头函数
<body><script>// 1. 构造函数this指向 实例对象function Person(name, age) {this.name = name}// 2. 原型对象this指向 实例对象Person.prototype.sayHi = function () {console.log('hi~')console.log(this)  // 指向实例对象 zs}const zs = new Person('张三')zs.sayHi()</script>
</body>

constructor 属性

在哪里? 每个原型对象里面都有个constructor 属性(constructor 构造函数)

作用:该属性指向该原型对象的构造函数, 简单理解,就是指向我的爸爸,我是有爸爸的孩子

使用场景:

如果有多个对象的方法,我们可以给原型对象采取对象形式赋值.

但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了

此时,我们可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数。

<body><script>// constructor属性function Person(name) {this.name = name}// 1. constructor属性在原型对象里面// console.log(Person.prototype)// 2.  constructor属性 指向原型对象的构造函数console.log(Person.prototype.constructor === Person)  // true// 3. 有什么使用场景呢?// Person.prototype.sing = function () {//   console.log('我会唱歌')// }// Person.prototype.dance = function () {//   console.log('我会跳舞')// }// console.log(Person.prototype)Person.prototype = {// 手动指定一个constructor 指回构造函数constructor: Person,sing() {console.log('我会唱歌')},dance() {console.log('我会跳舞')}}console.log(Person.prototype)</script>
</body>

原型

对象都会有一个属性 _proto_ 指向构造函数的prototype 原型对象

之所以我们对象可以使用构造函数 prototype 原型对象的方法,就是因为对象有_proto_ 原型的存在

<body><script>// 构造函数function Person(name) {this.name = name}// 1. 实例对象里面有 __proto__ 属性const zs = new Person('张三')console.log(zs)// 2.  __proto__ 指向原型对象 console.log(zs.__proto__ === Person.prototype)  // true// 3. 注意事项// 3.1 prototype 原型对象    __proto__ 原型// 3.2 __proto__ 非标准属性,在现代浏览器里面显示的是 [[Prototype]] 但是他们是等价的// 3.3 __proto__ 尽量不要修改它,否则会影响性能</script>
</body>

注意:

  1. proto 原先是JS非标准属性,但是 es6 规范中开始标准化, [[prototype]]和__proto__意义相同
  2. 尽量不要修改这个属性,对性能影响非常严重的
  3. 约定: prototype原型对象而 __proto__原型

原型链

__proto__属性链状结构称为原型链

作用:原型链为对象成员查找机制提供一个方向,或者说一条路线

在这里插入图片描述

<body><script>// __proto__属性链状结构称为原型链// Person构造函数function Person(name) {this.name = name}// 1. 实例对象const zs = new Person('张三')zs.sayHi = function () {console.log('实例对象的方法')}// zs.sayHi()// 2. Person 原型对象Person.prototype.sayHi = function () {console.log('Person原型对象的方法')}// zs.sayHi()// 3. Ojbect 原型对象Object.prototype.sayHi = function () {console.log('Object原型对象的方法')}// zs.sayHi()// 4. nullzs.sayHi()// console.log(zs.sayHi)  // undefined</script>
</body>

①当访问一个对象成员(属性/方法)时,首先查找这个对象自身有没有该成员(属性/方法)

②如果没有就查找它的原型对象(也就是 __proto__指向的 prototype 原型对象)

③如果还没有就查找原型对象的原型对象(Object的原型对象)

④依此类推一直找到 Object 为止(null)

⑤原型链就在于为对象成员查找机制提供一个方向,或者说一条路线

instanceof 运算符

用来检测构造函数.prototype 是否存在于实例对象的原型链上

<body><script>// instanceof 运算符 // 语法:  实例对象  instanceof  构造函数// 作用: 检测构造函数的原型对象是否在实例对象的原型链上// Person构造函数function Person(name) {this.name = name}function Person1(name) {this.name = name}const zs = new Person('张三')console.log(zs instanceof Person)  // trueconsole.log(zs instanceof Person1)  // false// 数组 const arr = [1, 2, 3]console.log(arr instanceof Array)  //  trueconsole.log(arr instanceof Object)  //  true console.log(arr) // __proto__console.log(arr.__proto__ === Array.prototype) // trueconsole.log(Array.prototype.__proto__ === Object.prototype) // true</script>
</body>

在这里插入图片描述

原型继承

继承是面向对象编程的另一个特征。龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义

有些公共的属性和方法可以写到父级身上,子级通过继承也可以使用这些属性和方法

JavaScript 中大多是借助原型对象实现继承的特性

<body><script>// 1. 抽取封装 公共的属性和方法  Person构造函数// 父级function Person() {this.eyes = 2}Person.prototype.eat = function () {console.log('我会吃饭')}console.log(new Person())console.log(new Person() === new Person())  // false// 男人构造函数function Man() {}// 女人构造函数function Woman() {}// 2. 继承-借助于原型对象Man.prototype = new Person()Man.prototype.constructor = Manconsole.log(Man.prototype)const zs = new Man()// console.log(zs)Woman.prototype = new Person()Woman.prototype.constructor = Womanconst xl = new Woman()// console.log(xl)Woman.prototype.baby = function () {console.log('我会生孩子')}console.log(xl)console.log(zs)  // 张三没有baby方法了</script>
</body>

http://www.ppmy.cn/news/753008.html

相关文章

新博文将发布在opoo.org

之前没想过在正儿八经的写博客&#xff0c;最近又突然来了兴趣&#xff0c;有时间想将自己的心得体会尽量写下来&#xff0c;新博将发布在 opoo.org 。

Opera下载最新版本地址

目前Opera官网可以打开&#xff0c;但是点下载时就会出错&#xff0c;国内无法访问Opera的下载地址&#xff0c;无法通过官网直接下载Opera浏览器。下面提供下载的方式。 一、通过官方的ftp站点下载 FTP地址为 1 http: //ftp .opera.com /pub/opera/desktop/ 如图&#xff0c;选…

使用Django操作数据库的一些坑-ORM机制

分析这两个接口 def get_topology_by_project(request):if request.method "POST":project_id request.POST.get(project_id)print(project_id)topologies Topology.objects.filter(project_id_idproject_id)topology_list []for topology in topologies:topolo…

postgresql(一):使用psql导入数据库

使用psql导入数据库 1、概述2、具体问题3、总结 1、概述 大家好&#xff0c;我是欧阳方超。 听说postgresql越来越流行了&#xff1f;psql是一个功能强大的命令行工具&#xff0c;用于管理和操作PostgreSQL数据库。它提供了一个交互式环境&#xff0c;允许用户执行SQL查询、创…

ie浏览器网站怎么设置网站兼容性

打开IE浏览器&#xff0c;按altx 打开找到兼容视图设置 点击进入 如图所示&#xff1a; 添加你想要的网站即可

不要让Microsoft edge 打开IE浏览器的设置(兼容性问题)

1打开Microsoft edge 2 打开设置 3 搜索栏搜索IE&#xff0c;打开即可

两个关于IE浏览器兼容性问题

问题一、mailto在ie浏览器下使用中文乱码问题 <a href"mailto:mysonfoxmail.com?subject邮件主题">发邮件</a>解决方式&#xff1a;先将中文参数进行UrlEncode编码 <a href"mailto:mysonfoxmail.com?subject%e9%82%ae%e4%bb%b6%e4%b8%bb%e9%…

IE11浏览器设置为兼容不同IE版本

1.打开IE11浏览器&#xff0c;点击“设置”图标。 2.选择”F12 开发者工具“ 3.选择”浏览器模式“下拉选的版本”8“即完成设置。