Javascript 面向对象编程(一)
目的
- 什么是面向对象编程
- 复习关键字new并且理解它所做的四件事
- 在我们的代码中使用构造函数来优化我们得代码
- 使用call和apply来重构构造函数
面向对象编程的定义
- 基于对象概念的编程模式
- 这些对象是由类创建的,我们可以把类想象成一个蓝图,把这些对象叫做类的实例
- 尽量让类抽象化和模块化
JavaScript中的面向对象编程
JavaScript 中没有内置的类,但是我们可以用函数和对象去模拟
1. 创建对象
想象我们要创建一些house对象,他们都有 bedrooms, bathrooms, numSqft 属性
var house = {bedrooms: 2,bathroom: 2,sqFeet: 1000
}var house1 = {bedrooms: 2,bathroom: 2,sqFeet: 1000
}var house2= {bedrooms: 2,bathroom: 2,sqFeet: 1000
}
// 想象一下 我们如果有 1000个房子
复制代码
解决办法 创建一个函数来构建这些类似的“房子”对象,而不是创建无数个不同的对象
1.构造函数
让我们使用一个函数作为每个房子应该是什么的蓝图——我们把这些函数称为“构造函数”
function House(bedrooms, bathrooms, numSqft){this.bedrooms = bedroomsthis.bathrooms = bathroomsthis.numSqft = numSqft}
复制代码
注意一些事:
- 函数名的大小写
- 关键字this!!!
- 我们将属性附加到关键字“this”上。我们希望关键字“this”指的是我们将从构造函数函数中创建的对象,我们该如何做呢?
2.使用构造函数创建对象
function House(bedrooms,bathrooms,numSqft) {this.bedrooms = bedroomsthis.batnrooms = bathroomsthis.numSqft = numSqft}// testvar firstHouse = Houes(2,2,1000)firstHouse //undefined ....
复制代码
为什么不起作用!!
- 我们没有从函数中返回任何东西所以我们的House函数返回没有定义的
- 我们没有显式地绑定关键字'this'或将它放在声明的对象中。这意味着关键字“This”的值将是全局对象,这不是我们想要的!
解决办法 使用关键字new
function House(bedrooms,bathrooms,numSqft) {this.bedrooms = bedroomsthis.batnrooms = bathroomsthis.numSqft = numSqft}// testvar firstHouse = new House(2,2,1000);firstHouse.bedrooms; // 2firstHouse.bathrooms; // 2firstHouse.numSqft; // 1000
复制代码
思考关键字new做了什么
- 首先, 关键字new创建了一个新的空对象
- 然后,它把关键字this设置到了这个空对象上
- 添加一条 ‘return this’ 在函数的末尾
- 执行原型连接操作 {它将一个属性添加到名为“proto”的空对象上,这个空对象将构造函数上的prototype属性链接到空对象上(后面会详细介绍)}
练习 为Dog创建一个构造函数,每个Dog都有姓名(name),年龄(age)属性, 还有bark方法
function Dog(name, age) {this.name = name;this.age = age;this.bark = function() {console.log(this.name + ' 汪汪汪')}}// test var dog1 = new Dog("小黄",1)var dog2 = new Dog("小美",2)dog1.bark() // 小黄 汪汪汪dog2.bark() // 小美 汪汪汪
复制代码
3.多个构造函数
分别为 Car 和 Motorcycle 创建一个构造函数
function Car(make, model, year) {this.make = make;this.model = model;this.year = year;this.numWheels = 4}
复制代码
function Motorcycle(make, model, year) {this.make = make;this.model = model;this.year = year;this.numWheels = 2}
复制代码
摩托车的功能有重复。有没有办法“借用”汽车功能并在摩托车功能中调用它? 使call/apply
function Car(make, model, year){this.make = make;this.model = model;this.year = year;this.numWheels = 4;}function Motorcycle(make, model, year){//using callCar.call(this, make, model, year)this.numWheels = 2}function Motorcycle(make, model, year){// using applyCar.apply(this, [make,model,year]);this.numWheels = 2;}function Motorcycle(){ // 我们甚至不需要传递参数!// 更好的用法是使用apply和argumentsCar.apply(this, arguments);this.numWheels = 2;}
复制代码
小结一下
- 面向对象编程是一种基于对象被一种蓝图构建的模式,我们使用面向对象写更多模块化和可共享的代码
- 在支持OOP的语言中,我们将这些蓝图称为“类”,而从它们创建的对象称为“实例”
- 由于我们在JavaScript中没有内置的类支持,所以我们使用函数来模拟类。这些构造函数通过使用new关键字创建对象
- 我们可以通过call或apply来避免多个构造函数中的重复
Javascript 面向对象编程(一)相关推荐
- 《JavaScript面向对象编程指南》——第1章 引言1.1 回顾历史
本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.1节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...
- 《JavaScript面向对象编程指南》——1.3 分析现状
本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.3节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...
- (二)Javascript面向对象编程:构造函数的继承
Javascript面向对象编程:构造函数的继承 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承&q ...
- javascript 面向对象编程(工厂模式、构造函数模式、原型模式)
javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /*** 工厂模式*/ ...
- JavaScript面向对象编程深入分析
JavaScript面向对象编程深入分析 一. Javascript 面向对象编程:封装 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又 ...
- 《javascript面向对象编程指南》读书笔记
<javascript面向对象编程指南>读书笔记 <javascript面向对象编程指南>读书笔记 第一章 面向对象的JavaScript 第二章 基本数据类型与流程控制 变量 ...
- (转)Javascript 面向对象编程(一):封装
它们都是非常优秀的Javascript读物,推荐阅读. 笔记分成三部分.今天的第一部分是讨论"封装"(Encapsulation),后面的第二部分和第三部分讨论"继承&q ...
- 《JavaScript面向对象编程指南》——1.7 训练环境设置
本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.7节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...
- 《JavaScript面向对象编程指南》—第128页错误指正
最近在阅读<JavaScript面向对象编程指南第2版>,感觉很有帮助.今晚发现一个小错误,想指正一下. 如图,书中第128页: 书中的第三个例子代码如下: "potato&qu ...
- 浅谈JavaScript 面向对象编程[转]
这周心血来潮,翻看了现在比较流行的几个 JS 脚本框架的底层代码,虽然是走马观花,但也受益良多,感叹先人们的伟大-- 感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript 面 ...
最新文章
- 如何在高精度下求解亿级变量背包问题?
- python 动态编译代码_使用PyQt(Python+Qt)+动态编译36行代码实现的计算器
- 因为此版本的应用程序不支持其项目类型(.vcproj)的解决方法
- 技术面试的时候应该了解公司点什么
- [NLP]--NLP programming tutorial
- 怎么看android sdk 文档
- 【渝粤教育】国家开放大学2019年春季 455物流实务 参考试题
- 安装HP P1008打印机经历
- opencv摄像头捕获视频
- python timepicker_Android DatePicker和TimePicker:时间日期选择器
- autocad ios 虚线_autocad中画箭头、虚线绘制方法介绍
- ECS(Entity-Component-System)是什么?
- 应该用BPM管理业务规则吗?
- 机器学习在地球物理(地震)中的发展历程_1
- win10 使用苹果耳机没有声音解决方案
- Linux 内核调试 四:qemu-system-arm功能选项整理
- 谷歌浏览器的timeline工具的使用
- html5小游戏跑,HTML5 Speedster 小游戏(高速跑跳过关)
- 用友U8 cloud再升级,为成长型集团注入数智新力量
- Java 集成阿里大鱼平台短信服务发送验证码 --- 补齐注册部分
热门文章
- Java程序员从笨鸟到菜鸟之(八十六)跟我学jquery(二)大话jquery选择器
- 有哪些LSTM(Long Short Term Memory)和RNN(Recurrent)网络的教程?
- 深度学习概述:从感知机到深度网络
- 深度学习Deep Learning 相关库简介
- 一些很有用的技术工具
- 世界围棋人机大战、顶峰对决第一盘:围棋世界冠军Lee Sedol(李世石,围棋职业九段)对战Google DeepMind AlphaGo围棋程序,Google AlphaGo首战告捷
- Coursera课程:Python for everyone chapter 1
- 你应该知道的Excel 2007小技巧
- iOS开发UI基础—手写控件,frame,center和bounds属性
- nginx(一)安装与命令总结