JavaScript速成课--面向对象程序设计

2023-09-21 12:31:08

目录

一.类的定义和实例化

1.类的定义

2.类的实例化

二.访问和添加对象的属性和方法

1.访问对象的属性和方法

2.向对象添加对象属性和方法

三.继承

1.原型实现继承

2.构造函数实现继承

3.重新定义继承父类的方法


一.类的定义和实例化

        在JavaScript中没有声明类的关键字,也没有对类访问的权限控制,JavaScript中使用函数来定义类

1.类的定义

        定义类的语法:

function className(){

}

例:

function student(){
this.name="myun";
this.age=22;
this.school="ybu";
this.like=function(){
alert("hello world, hello time");
}
}
2.类的实例化

        在JavaScript中类的实例化使用关键字new,类的实例化即是创建对象

创建对象语法:

new className();

例:上面的student类

var student=new student();
student.like();

        在JavaScript中还可以通过对象直接初始化对象,该方法不需要使用new关键字就可以生成实例:

var student={
name:"myun";
age:22
school:"ybu";
like:function(){
alert("hello world hello time");
}
/* 或者
student.like=function(){
alert("hello world hello time");
}
*/
}

二.访问和添加对象的属性和方法

        属性是一个变量,用来表示一个对象的特征,方法是一个函数,用来表示对象的操作

1.访问对象的属性和方法

(1)使用“.”来访问对象属性

语法:

objectName.propertName

objectName        对象名称

propertName        属性名称

(2)使用“[ ]”来访问对象属性

语法:

objectName[propertyName]

(3)使用“.”来访问对象的方法

语法:

objectName.methodName()

objectName        对象名称

methodName        函数名称

例如:

function student(name,age){
this.name=name;
this.age=age;
this.school=age;
this.like=function(){
alert("hello world, hello time");
}
}
var student=name student("myun",22);
alert("school"+student.school);  //访问对象属性
alert("name"+student[name]);
alter("method"+student.like());  //访问方法
2.向对象添加对象属性和方法

        JavaScript可以在定义类时所以属性和方法,也可以在创建对象后动态添加属性和方法

例:

function Student(name,age){
this.name=name;
this.age=age;
this.school=age;
this.like=function(){
alert("hello world, hello time");
}
}
var student=name Student("myun",22);
alert("school"+student.school);  //访问对象属性
alert("name"+student[name]);
alter("method"+student.like());  //访问方法
//动态添加属性和方法
student.sex=“男”;
student.say=function(){
alert("添加方法");
}

        值得注意的是sex属性和say()是动态添加的,它们只属性student对象,如果在实例一个student1对象,student1.say()就是错误的用法

        如果想添加的属性和方法能让所有对象共享,可以使用原生函数添加属性和方法:

function Student(name,age){
this.name=name;
this.age=age;
this.school=age;
this.like=function(){
alert("hello world, hello time");
}
}
var student=name Student("myun",22);
var student1=name Student("myun9527",22);
//原生函数动态添加属性和方法
Student.sex=“男”;
Student.say=function(){
alert("原生函数添加方法");
}
//所有对象共享添加的对象
student.say();
alert(student.sex);
student1.say();
alert(student1.sex);

三.继承

        继承是指一个对象的属性和方法来自另一个对象,此时称前一个对象为子类,后一个为父类,JavaScript常用两种继承方式,分别是原型实现继承和构造函数实现继承

1.原型实现继承

        原型实现继承指子类指定父类的方法是将父类的实例对象赋值给子类的prototype属性,语法:

A.prototype=new B(....);

例: 

function Student(name,age){
this.name=name;
this.age=age;
}

Student.prototype.say(){
alert("原型函数name:"+this.name);
}

function boys(sex){
this.sex=sex;
}

boys.prototype=new Student("myun",22)  //将Student设置为boys的父类

boys.prototype.tell(){
alert(this.name,this.age.this.sex);
}

var student=new Student("myun1",22);
var boys1=new boys("male");
boys1.say();   //myun
boys1.tell();   //myun,22,male
2.构造函数实现继承

        构造函数实现继承就是在子类的构造函数中使用call调用父类构造器函数,从而解决向父类构造函数传参问题,并实现继承

例:

function Student(name,age){
this.name=name;
this.age=age;
}

Student.prototype.say(){
alert("原型函数name:"+this.name);
}

function boys(name,age,sex){
Student.call(this,name,age);  //调用call传参
this.sex=sex;
}

boys.prototype=new Student()  //将Student设置为boys的父类

boys.prototype.tell(){
alert(this.name,this.age.this.sex);
}

var student=new Student("myun1",22);
var boys1=new boys("myun",22,"male");
boys1.say();   //myun
boys1.tell();   //myun,22,male
3.重新定义继承父类的方法

        如果子类要重新定义继承自父类的方法,那么只要将定义的方法名和父类继承的方法名一样就可以了,例如上面的say()方法:

boys.prototype.say=function(){
alert("这是子类中的say()方法");
}

var boy=new boys();
boy.say();  //调用自己的say()函数,不再是继承父类的函数

更多推荐

随机抽样一致RANSAC

文章目录RANSAC简介RANSAC算法Ransac在3D视觉中的用法直线拟合单应性矩阵拟合RANSAC的优缺点RANSAC的优点RANSAC的缺点RANSAC在弯曲场景中的缺点:RANSAC适用场景RANSAC简介RANSAC是RANdomSAmpleConsensus的缩写,中文翻译叫随机采样一致。它可以从一组观测

嵌入式开发环境Vscode开发STM32单片机程序

STM32单片机非常强大,大多数教程都是使用keil编译器,keil是收费的而gcc是开源免费的。这里介绍一些使用gcc+vscode开发单片机程序的经验。(这里不解释gcc是什么)。​第一:环境准备gccARM开发者官网https://developer.arm.com/我有个习惯:尽量使用免安装版软件,直接解压到软

华为云云耀云服务器L实例评测-搭建基于hexo的个人博客

1、演示访问地址:演示传送门开头先来一个效果图。2、准备服务器前面有介绍了一下华为云云耀云服务器L实例评测以及简单的配置用法,具体可以看上篇的博客。https://blog.csdn.net/yongqing_/article/details/132867889我这里用的是华为云云耀云服务器L实例,2核2G的配置。然后

Python 数独求解器

文章目录使用回溯算法在Python中解决数独总结Sudoku(数独)是一种基于逻辑的数字填充谜题游戏,最受喜爱的是那些热爱逻辑和推理的人。解决数独谜题有助于提高集中注意力和逻辑思维能力。本文介绍了如何使用Python解决数独谜题。使用回溯算法在Python中解决数独在寻找计算问题的解决方案时,我们经常使用回溯算法。在解

关于安卓SVGA浅尝(一)svgaplayer库的使用

关于安卓SVGA浅尝(一)使用相关链接SVGA官网SVGA-github说明文档背景项目开发,都会和动画打交道,动画的方案选取,就有很多选择。如Json动画,svga动画,gif等等。各有各的优势。目前项目中用到了svga的动画,因此,就有了这一系列的文章。使用(1)引入首先,引入的方式,大致有两种:一种是直接使用远程

玩玩“小藤”开发者套件 Atlas 200I DK A2 之部署智能语音助手

玩玩“小藤”开发者套件Atlas200IDKA2之部署智能语音助手0.背景1.安装flac2.创建自签名证书3.创建虚拟环境4.安装PyTorch5.安装PyTorch插件torch_npu6.安装APEX混合精度模块7.安装依赖库8.使用gradio启动智能语音助手9.访问智能语音助手0.背景总所周知,英伟达的GPU

c++编译过程-各阶段任务

首先,g++在编译源代码时,会经历下面几个阶段-E首先进行预处理,还是源代码格式.i-S编译器生成汇编语言.s-c汇编器生成二进制文件.o-链接库文件,其他代码.out一.预处理预处理主要是1.将#宏定义进行展开,2.将头文件内容替换3.去掉注释二.编译编译主要是将预处理后的代码转换成汇编语言:1.对代码进行语法分析,

AndroidUtil - 强大易用的安卓工具类库

官网https://github.com/Blankj/AndroidUtilCode/blob/master/README-CN.md项目介绍AndroidUtilCode🔥是一个强大易用的安卓工具类库,它合理地封装了安卓开发中常用的函数,具有完善的Demo和单元测试,利用其封装好的APIs可以大大提高开发效率,如

解锁黑科技!群晖管家+cpolar内网穿透,让你的本地黑群晖实现公网远程访问!

白嫖怪狂喜!黑群晖也能使用群晖管家啦!文章目录白嫖怪狂喜!黑群晖也能使用群晖管家啦!1.使用环境要求:2.下载安装群晖管家app3.随机地址登陆群晖管家app4.固定地址登陆群晖管家app自己组装nas的白嫖怪们虽然也可以通过在局域网使用黑群晖,但是群晖quickconnect需要绑定正版群晖账号,那么白嫖怪们要怎样在

【自动化测试】如何下载安装webdriver

1.下载合适的浏览器驱动2.配置环境变量写自动化脚本的时候经常会用到selenium,selenium来自webdriver模块,所以需要安装对应的webdriver驱动。1.查看自己浏览器的版本;发现我的浏览器版本已经升到了最新的版本,我参照这个链接,下载了最新版本的驱动,https://googlechromela

基于JAVA+SpringBoot+Vue+协同过滤算法+爬虫的前后端分离的租房系统

✌全网粉丝20W+,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取项目下载方式🍅一、项目背景介绍:随着城市化进程的加快,租房需求逐渐增多,传统的租房方式已经无法满足人们的需求。为了提

热文推荐