BCSP-玄子前端开发之JavaScript+jQuery入门CH06_JavaScript面向对象

news/2024/7/10 23:05:09 标签: javascript, jquery, 前端, html5, css3

BCSP-玄子前端开发之JavaScript+jQuery入门CH06_JavaScript面向对象

4.6 对象

4.6.1 什么是对象

对象是相关属性和方法的集合体

  • 属性
  • 方法

String对象

  • length 属性
  • indexOf()
  • replace() 方法

Array对象

  • length 属性
  • sort()
  • concat()
  • join() 方法

Date对象

  • get×××：获取年、月、日、时、分、秒等等
  • set×××：设置年、月、日、时、分、秒等等

Math对象

  • round()
  • max()
  • min() 方法

Boolean对象

  • toString() 方法

RegExp对象

  • compile()
  • exec()
  • test() 方法

4.6.2 创建对象

  • 内置对象
  • 自定义对象

4.6.3 创建常见内置对象

String 对象

  • 字符串
  • new String()

Date 对象

  • new Date()

Array 对象

  • [ element0, element1, …, elementN ]
  • new Array()

Math 对象

  • 所有属性和方法都是静态的

Boolean 对象

  • new Boolean()

RegExp 对象

  • new RegExp()

4.6.4 创建自定义对象

基于Object对象创建自定义对象

javascript">var 对象名称 = new Object();

通过点操作符（.）为其添加属性和方法

javascript">var student = new Object();
student.name = "张三";
student.age = 18;
student.email = "zhangsan@163.com";
student.hobby = "打球";
student.showName = function() { alert( this.name ); }
student.showName();

使用字面量赋值方式创建自定义对象

javascript">var student = {
     name : "张三",
     age : 18,
     email : "zhangsan@163.com",
     hobby : "打球",
     showName : function() {
              alert( this.name );
     }
 }
student.showName();

4.7 简单工厂模式

基于Object对象或使用字面量创建对象，如需批量创建对象，会产生大量重复代码

使用简单工厂模式封装对象的创建逻辑

  • 模式是指在某一环境下某个问题的一种解决方案
  • 简单工厂模式是一种用来创建对象的软件设计模式

4.7.1 演示

将对象的创建逻辑封装在一个函数中

javascript">function createStudent( name, age, email, hobby ) {
        var p = new Object();
        p.name = name;
        ……
        p.showName = function() { alert( this.name ); }
        return p;
}

使用工厂函数创建对象

javascript">var person1 = createStudent("张三", 18, "zhang3@163.com", "打球");
person1.showName();
var person2 = createStudent("李四", 19, "lisi@163.com", "看书");
person2.showName();

4.8 构造函数

前述创建对象的方法无法区分不同类型的对象

4.8.1 定义构造函数

用以创建特定类型的对象

javascript">function Student( name, age, email, hobby ) {
            this.name = name;
            ……
            this.showName = function() { alert(this.name); }
}

4.8.2 与工厂函数相比

  • 没有显式创建Object对象，没有return语句
  • 将属性和方法赋给this对象

4.8.3 使用构造函数创建对象

javascript">var stu1 = new Student( "张三", 18, "zhangsan@163.com", "打球" );
stu1.showName();
var stu2 = new Student( "李四", 19, "lisi@163.com", "看书" );
stu2.showName();

4.8.4 构造函数执行过程

构造函数执行过程中会经历以下4个步骤

  1. 创建一个新对象
  2. 将构造函数的作用域赋给新对象，因此this就指向了这个新对象
  3. 执行构造函数中的代码，为这个新对象添加属性及方法
  4. 返回新对象

4.8.5 constructor属性和

对象中包含constructor属性，指向其构造函数

javascript">alert( stu1.constructor == Student );  // 结果为true
alert( stu2.constructor == Student );  // 结果为true

4.8.6 instanceof操作符

使用instanceof操作符检测对象类型

javascript">alert( stu1 instanceof Student );  // 结果为true
alert( stu2 instanceof Student );  // 结果为true

stu1和stu2同是Object类型，所有对象都继承自Object

javascript">alert( stu1 instanceof Object );  // 结果为true
alert( stu2 instanceof Object );  // 结果为true

4.8.7 构造函数问题分析

构造函数的定义方式会导致showName()方法在每个实例上都要重新创建一遍

javascript">function Student( name, age, email, hobby ) {
            ……
            this.showName = function() { alert(this.name); }
}

通过函数定义的方式把showName()方法转移到构造函数的外部，所有实例共享全局作用域中定义的同一个showName()函数

javascript">function Student( name, age, email, hobby ) {
            ……
            this.showName = showName
}
function showName() { alert(this.name); }

全局函数实际上仅为某个对象调用，全局函数破坏了自定义类型的封装性

4.9 原型对象

每个函数都有一个prototype属性，指向其原型对象

使用原型对象方式添加属性和方法，所有实例会共享它所包含的属性和方法

javascript">构造函数名.prototype.属性或方法

javascript">function Student() {}
Student.prototype.name = "张三";
……
Student.prototype.showName = function() { alert(this.name); };
……

当实例读取某个属性时

  • 首先在实例本身开始搜索，找到则返回
  • 如没有找到，则继续在原型对象中查找

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-59hCbbw2-1682304866455)(./assets/image-20230423214211000.png)]

4.10 继承

  • 原型链
  • 对象继承

4.10.1 原型链

一个类型的实例是另一个类型的原型对象，相关的原型对象层层递进，构成了实例与原型的链条，即原型链

javascript">function Person() { this.foot = 2; }
Person.prototype.getFoot = function() { return this.foot; }

function Woman() { this.head = 1; }
Woman.prototype = new Person();
// 继承了Person
Woman.prototype.getHead = function() { return this.head; }

var woman1 = new Woman();
alert(woman1 instanceof Woman); //true
alert(woman1 instanceof Person);  //true
alert(woman1 instanceof Object);   //true
alert(woman1.getFoot()); //2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ck5uG8DX-1682304866458)(./assets/image-20230423214422125.png)]

woman1调用getFoot()的步骤

  1. 搜索实例
  2. 搜索Woman.prototype
  3. 搜索Person.prototype

搜索的过程要一环一环地前行到原型链的末端才会停下来

4.10.2 完整的原型链

所有函数的默认原型都是Object对象的实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QTDUxUOj-1682304866458)(./assets/image-20230423214512202.png)]

4.10.3 方法重写

子类型可以通过prototype对象重写父类型中的方法

javascript">function Person() { this.foot = 2; }
Person.prototype.getFoot = function() { return this.foot; }

function Woman() { this.head = 1; }
Woman.prototype = new Person();
Woman.prototype.getHead = function() { return this.head; }

Woman.prototype.getFoot = function() { return false; }
……

4.11 对象继承

javascript">function Person() {
    this.skinColor = [ "black", "white" ]; // 肤色
}
function Woman() {}
Woman.prototype = new Person(); // 继承了Person

var woman1 = new Woman();
woman1.skinColor.push( "yellow" );
alert(woman1.skinColor); // 输出什么？

var woman2 = new Woman();
alert(woman2.skinColor); // 输出什么？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xro1zHPd-1682304866458)(./assets/image-20230423214607121.png)]

问题1：两个实例输出的信息一样，为什么？

问题2：创建子类型的实例时，不能向父类型的构造函数中传参

4.11.1 借用构造函数

借用构造函数又被称为伪造对象或经典继承，指在子类型构造函数的内部调用父类型的构造函数

应用某一对象的一个方法，用另一个对象替换当前对象

javascript">apply( [ thisOjb [, argArray ]] )

调用一个对象的一个方法，以另一个对象替换当前对象

javascript">call( [ thisObj [, arg1 [, arg2 [, … [, argN ]]]]] )

javascript">function Person() {
    this.skinColor = [ "black", "white" ]; // 肤色
}
function Woman() {
    Person.call(this); // 也可以使用apply()方法
    // 继承了Person
}
var woman1 = new Woman();
woman1.skinColor.push( "yellow" );
alert(woman1.skinColor); // 输出什么？
var woman2 = new Woman();
alert(woman2.skinColor); // 输出什么？

借用构造函数可以在子类型构造函数中向父类型构造函数传参

javascript">function Person(name) {
    this.name = name;
}
function Woman(){
    Person.call( this, "amy" );
    this.age = 18;
}
……

为了确保父类型构造函数不会重写子类型的属性，可以在调用父类型构造函数后再添加应该在子类型中定义的属性

4.11.2 组合继承

组合继承也叫做伪经典继承

  • 将原型链和借用构造函数的技术组合到一块，融合二者的优点并规避二者的缺陷，是JavaScript开发中最常用的一种继承模式
  • 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承
  • 既实现了函数复用，又能够保证每个实例都有自己的属性
javascript">function Person(name) {
    this.name = name;
    this.skinColor = [ "black", "white" ]; // 肤色
}
Person.prototype.sayName = function () { alert(this.name); }

function Woman(name, age) {
    Person.call(this, name); // 继承属性
    this.age = age;
}
Woman.prototype = new Person(); // 继承方法
Woman.prototype.sayAge = function () { alert(this.age); }
……

BCSP-玄子前端开发之JavaScript+jQuery入门CH06_JavaScript面向对象


http://www.niftyadmin.cn/n/258591.html

相关文章

基于DE2-115平台实现VGA显示器的显示实验

基于DE2-115平台实现VGA显示器的显示实验

目录 什么是VGA协议VGA显示原理VGA时序图VGA参数图实验记录准备PLLROM取模代码data_drive.vkey_debounce.vvga_drive.vvga_top.v 实验现象 什么是VGA协议 这一部分摘录自野火的征途Pro《FPGA Verilog开发实战指南——基于Altera EP4CE10》2021.7.10（上）…
阅读更多...
python接口自动化测试 - mock模块基本使用介绍

python接口自动化测试 - mock模块基本使用介绍

目录 mock简介 mock作用 解决依赖问题，达到解耦作用 模拟复杂业务的接口 单元测试 前后端联调 mock类解读 mock实际使用 一个未开发完成的功能如何测试？ 一个完成开发的功能如何测试？ mock装饰器 mock简介 py3已将mock集成到unitt…
阅读更多...
系统集成项目管理工程师 笔记（第七章：项目范围管理）

系统集成项目管理工程师 笔记（第七章：项目范围管理）

文章目录 7.1.1 项目范围管理的含义及作用7.1.2 项目范围管理的主要过程（6个） 7.2 编制范围管理计划和范围说明书 2687.2.1 编制范围管理计划过程所用的工具与技术7.2.2 编制范围管理计划过程的输入、输出 7.3 收集需求 2717.3.1 收集需求过程的工具与技…
阅读更多...
java运行python脚本，待完善版

java运行python脚本，待完善版

参考资料： windows下调用CMD运行方式 兼容linux/windows，同步异步方式 指定特殊运行环境的运行（如：anaconda运行环境） 整合以上三种方式终极版源码 相关内容： 调用python脚本传参说明 如果不传参数，python脚本可以随意写，比如：
阅读更多...
Python 基础（十二）：字典

Python 基础（十二）：字典

❤️ 博客主页：水滴技术 🌸 订阅专栏：Python 入门核心技术 🚀 支持水滴：点赞👍 收藏⭐ 留言💬 文章目录 一、声明字典1.1 使用 {} 声明字典1.2 使用 dict 函数声明字典1.3 声明一个空的字典 二…
阅读更多...
重要知识点

重要知识点

重要知识点 1、Java值传递 值传递：方法接收的是实参值的拷贝，会创建副本。副本的内容怎么修改也不会影响到原件本身。引用传递：方法接收的直接是实参所引用的对象在堆中的地址，不会创建副本，对形参的修改将影响到实参…
阅读更多...
STM32学习，从点灯开始

STM32学习，从点灯开始

大家好，我是程序员小哈。 综合实例：自动洗碗机的分享，上周五的直播完成了核心板的焊接，板子设计好了，也焊接完毕了，那么如何验证是否正确呢，既然是从0到1的教程，那么我们就先实现一…
阅读更多...
【Spring篇】DI相关内容

【Spring篇】DI相关内容

🍓系列专栏:Spring系列专栏 🍉个人主页:个人主页 目录 一、setter注入 1.环境准备 2.注入引用数据类型 3.注入简单数据类型 二、构造器注入 1.环境准备 2.构造器注入引用数据类型 3.构造器注入多个引用数据类型 4.构造器注入多个简单数据类型 …
阅读更多...
最新文章

Copyright @ 2022~2023