JS(四)--JavaScript 面向对象编程
JavaScript 面向对象编程
- 一、JavaScript 面向对象编程
- 1.1.、什么是面向对象编程
- 1.2、面向过程和面向对象的对比
- 1.3、JavaScript 中的对象?
- 1.3.1、属性和方法是什么?
- 二、面向对象编程案例
- 三、JS面向对象的特征
- 3.1、**封装性**
- 3.2、**继承性**
一、JavaScript 面向对象编程
1.1.、什么是面向对象编程
面向对象是一种解决问题的思路,一种编程思想。
1.2、面向过程和面向对象的对比
例如:洗衣服
面向过程的思维方式:
- 收拾脏衣服
- 打开洗衣机盖
- 将脏衣服放进去
- 设定洗衣程序
- 开始洗衣服
- 打开洗衣机盖子
- 晒衣服
面向对象的思维方式:
洗衣机需要什么对象?
- 女朋友
- 洗衣机
在面向对象的思维方式中:我们只关心要完成事情需要的对象。
总结:面向对象是一种解决问题的思路,一种编程思想。
1.3、JavaScript 中的对象?
万事万物都是对象
在 JavaScript 中,所谓的对象,就是键值对的集合。
1.3.1、属性和方法是什么?
比如要描述一个人,这个人有 name,age,job,体现在代码中:
{ name:"张三", age:18, job:"Programe" }
比如要做一个学生管理系统,那学生就是要设计的对象,学生拥有
name,age,gender,address,phone,体现在代码中:
{ name:"刘亦菲", age:18, gender:"female", address:"上海", phone:"110" }
总结:
面向过程关注的实现功能的步骤,是如何把功能拆解后一步步的实现
面向对象则是关注的实现功能的一系列的对象
二、面向对象编程案例
例如:
设置页面中的 div 和 p 的边框为 1px solid red
传统的处理办法 :
// 任务需求:
// 1> 获取 div 标签
var divs = document.getElementsByTagName( 'div' );
// 2> 遍历获取到的 div 标签
for(var i = 0; i < divs.length; i++) {//3> 获取到每一个 div 元素,设置 div 的样式divs[i].style.border = "1px dotted black";
}
// 4> 获取 p 标签
var ps = document.getElementsByTagName("p");
// 5> 遍历获取到的 p 标签
for(var j = 0; j < ps.length; j++) { // 获取到每一个 div 元素 设置 p 标签的样式ps[j].style.border = "1px dotted black";
}
使用函数进行封装优化
// 通过标签名字来获取页面中的元素
function tag(tagName) { // var dvs = document.getElementsByTagName(tagName); // return dvs; return document.getElementsByTagName(tagName);
}
// 封装一个设置样式的函数
function setStyle(arr) { for(var i = 0; i < arr.length; i++) { // 获取到每一个 div 元素arr[i].style.border = "1px solid #abc"; }
}
var dvs = tag("div");
var ps = tag("p");
setStyle(dvs);
setStyle(ps);
使用面向对象的方式
// 更好的做法:是将功能相近的代码放到一起
var inlett= { getEle: { tag: function (tagName) { return document.getElementsByTagName(tagName); }, id: function (idName) { return document.getElementById(idName); } }, setCss: { setStyle: function (arr) { for(var i = 0; i < arr.length; i++) { arr[i].style.border = "1px solid #abc"; } }, css: function() {}, addClass: function() {}, removeClass: function() {} // ... }// 属性操作模块// 动画模块// 事件模块// ...
};
var divs = inlett.getEle.tag();
inlett.setCss.setStyle(divs);
基于 Object 对象
var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){return this.name;
}
对象字面量方式(比较清楚的查找对象包含的属性及方法)
var person = {name : 'My name',age : 18,getName : function(){return this.name;}}
三、JS面向对象的特征
在进入正题前,先了解传统的面向对象编程(例如 Java)中常会涉及到的概念,大致可以包括:
- 类:定义对象的特征。它是对象的属性和方法的模板定义。
- 对象(或称实例):类的一个实例。
- 属性:对象的特征,比如颜色、尺寸等。
- 方法:对象的行为,比如行走、说话等。
- 构造函数:对象初始化的瞬间被调用的方法。
- 继承:子类可以继承父类的特征。例如,猫继承了动物的一般特性。
- 封装:一种把数据和相关的方法绑定在一起使用的方法。
抽象:结合复杂的继承、方法、属性的对象能够模拟现实的模型。 - 多态:不同的类可以定义相同的方法或属性。
在 JavaScript 的面向对象编程中大体也包括这些。不过在称呼上可能稍有不同,例如,JavaScript 中没有原生的“类”的概念,而只有对象的概念。因此,随着你认识的深入,我们会混用对象、实例、构造函数等概念。对象(类)的创建 在 JavaScript 中,我们通常可以使用构造函数来创建特定类型的对象。诸如 Object 和 Array 这样的原生构造函数,在运行时会自动出现在执行环境中。此外,我们也可以创建自定义的构造函数。
例如:
在下面的例子中,我们创建了 Person 的两个实例 person1 和 person2 。
function Person(name, age, job) {this.name = name;this.age = age;this.job = job;
}
var person1 = new Person('Weiwei', 27, 'Student');
var person2 = new Person('Lily', 25, 'Doctor');
按照惯例,构造函数始终都应该以一个大写字母开头(和 Java 中定义的类一样),普通函数则小写字母开头。要创建Person 的新实例,必须使用 new 操作符。
以这种方式调用构造函数实际上会经历以下 4 个步骤:
- 创建一个新对象(实例)
- 将构造函数的作用域赋给新对象(也就是重设了 this 的指向,this 就指向了这个新对象)
- 执行构造函数中的代码(为这个新对象添加属性)
- 返回新对象
3.1、封装性
对象是将数据与功能组合到一起, 即封装
- js 对象就是键值对的集合键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性如果键值是函数, 那么就称为方法
- 对象就是将属性与方法封装起来
- 方法是将过程封装起来
3.2、继承性
所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西传统继承基于模板 子类可以使用从父类继承的属性和方法。
class Person {string name;
int age;
}
class Student : Person {}
var stu = new Student();
stu.name
即:让某个类型的对象获得另一个类型的对象的属性的方法
js 继承基于对象 在 JavaScript 中,继承就是当前对象可以使用其他对象的方法和属性。
//声明父类var SuperClass = function () {var id = 1;this.name = ['javascript'];this.superValue = function () {console.log('superValue is true');console.log(id)}};//为父类添加共有方法SuperClass.prototype.getSuperValue = function () {return this.superValue();};//声明子类var SubClass = function () {this.subValue = function () {console.log('this is subValue ')}};//继承父类SubClass.prototype = new SuperClass() ;//为子类添加共有方法SubClass.prototype.getSubValue= function () {return this.subValue()};var sub = new SubClass();var sub2 = new SubClass();sub.getSuperValue(); //superValue is truesub.getSubValue(); //this is subValueconsole.log(sub.id); //undefinedconsole.log(sub.name); //javascriptsub.name.push('java'); //["javascript"]console.log(sub2.name) //["javascript", "java"]
JS(四)--JavaScript 面向对象编程相关推荐
- JavaScript 面向对象编程(四) —— 正则表达式
本篇为 JavaScript 进阶 ES6 系列笔记第四篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 : 系列笔记: JavaScript 面向对象编程(一) -- 面向对 ...
- 《javascript面向对象编程指南》读书笔记
<javascript面向对象编程指南>读书笔记 <javascript面向对象编程指南>读书笔记 第一章 面向对象的JavaScript 第二章 基本数据类型与流程控制 变量 ...
- 浅谈JavaScript 面向对象编程[转]
这周心血来潮,翻看了现在比较流行的几个 JS 脚本框架的底层代码,虽然是走马观花,但也受益良多,感叹先人们的伟大-- 感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript 面 ...
- JavaScript 面向对象编程(三) —— 函数进阶 / 严格模式 / 高阶函数 / 闭包 / 浅拷贝和深拷贝
本篇为 JavaScript 进阶 ES6 系列笔记第三篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 系列笔记: JavaScript 面 ...
- (二)Javascript面向对象编程:构造函数的继承
Javascript面向对象编程:构造函数的继承 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承&q ...
- javascript 面向对象编程(工厂模式、构造函数模式、原型模式)
javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /*** 工厂模式*/ ...
- JavaScript 面向对象编程(二) —— 构造函数 / 原型 / 继承 / ES5 新增方法
本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...
- VSCode自定义代码片段9——JS中的面向对象编程
JavaScript的面向对象编程 {// JS'OOP// 9 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自 ...
- 在JavaScript面向对象编程中使用继承(5)
明天就要回老家去过年了,关于这个"在JavaScript面向对象编程中使用继承"的话题居然还没有说完.如果不完成,留下来一拖就拖到明年去了.所以还是抽空把它写完,今年的事情今年做, ...
最新文章
- vim C plugins
- python if语句多个条件-Python中if有多个条件处理方法
- 物联网安全有哪些注意事项
- STM32——DMA
- PAT (Basic Level) Practice1015 德才论
- (附源码)spring boot宠物医院管理系统 毕业设计 180923
- Cocos Creator | 导航网格自动寻路:多角色寻路、动态规避障碍物、上/下坡度等
- 国内第一款企业集中管理平台--极通EWEBS3.0
- python之论文降重工具
- 图片怎样放大后不模糊?
- oracle begin 后声明,Oracle BEGIN END 详细用法
- 6款好用的文字云工具
- Python—字典的操作
- 微信小程序android和IOS拨打电话区别
- isis学不到looback口的路由_随手装了台LEDE软路由,测试WAN口能否跑万兆(上篇)...
- sybase客户端SqlDbx中文乱码问题解决
- 计算机二级系统班C语言讲义,计算机二级C语言2017辅导讲义:C语言基本知识
- HTTP 协议之Gzip压缩原理
- 1367 二叉树中的列表
- Backpack Cryptography【背包密码】
热门文章
- Windows_XP DLL修改
- html dt dd dl英文,dl dt dd是什么的缩写
- 光速不变_两点技术:以光速解决阵列问题
- java redis 断线重连_redis断线重连代码详解
- php如何实现余额充值,PHP集成支付宝快速实现充值功能
- Python-同一个类两个函数间变量的调用
- TensorFlow入门教程(29)车牌识别之使用DenseNet+CTC模型进行文字识别(五)
- python函数求导_python构建计算图1——简单实现自动求导
- 托福备考建议以及资料推荐
- DSFNet(Dynamic and Static Fusion Network for Moving Object Detection in Satellite Videos)代码调试