javaScript学习笔记（六）面向对象

文章目录

一、认识对象
- 1、初识对象
- 2、对象的方法以及遍历
- 3、对象的深浅克隆
- - 浅克隆
  - 深克隆
二、认识函数的上下文
- 1、什么是上下文？
- 2、上下文规则
- 3、call、apply、bind
- - call、apply、bind 三者的区别
- 4、上下文规则总结
三、构造函数
- 1、用new 操作符调用函数
- 2、构造函数？
- 2、类与实例
四、原型与原型链
- 1、什么是prototype？
- 2、原型链
- 3、hasOwnProperty 与 in
- 4、在Propertype上添加方法
- 5、原型链的终点
五、继承与面向对象
- 1、如何实现继承？
- 2、什么是面向对象
六、包装类
六、Math对象
- 1、Math.round() 四舍五入
- 2、Math.max()与Math.min()
- 3、随机数Math.random()
七、Data日期对象
- 1 、日期对像常用的方法
- 2 、时间戳
- 3 、倒计时小案例 (高考倒计时)

      认识对象1)认识对象   2)对象的方法    3)对象的遍历   4)对象的深浅克隆认识函数的上下文1)上下文规则 1 2 3 4 5 6 7    2)call和apply构造函数 1)用new调用函数的四步骤   2)构造函数   3)类和实例原型和原型链1)prototype和原型链查找   2)在prototype上添加方法  3)原型链的终点     4)继承上升到面向对象1)上升到面向对象小案例1   2)案例2js的内置对象1)包装类  2)Math对象    3)Date对象

一、认识对象

1、初识对象

        //对象（object)是“键值对”的集合，表示属性和值的映射关系var obj = { k: 'v', k: 'v', 'count-add': 'hello' }  // 语法//如果对象的属性键名不符合JS标识符命名规范，则这个键名必须用引号包裹var obj = { 'count-add': 'hello', name: 'Hi' }// 属性访问console.log(obj.name);  //点语法console.log(obj['count-add'])  //方括号// 属性的更改obj.name = 'updata'// 创建属性obj.sex = '2000'console.log(obj)//删除属性delete obj.nameconsole.log(obj)

2、对象的方法以及遍历

        //如果某个属性值是函数，则它也被称为对象的“方法var obj2 = {fn: function () {console.log('我是方法')}}obj2.fn()// 对象 的遍历// 和遍历数组类似，对象也可以被遍历，遍历对象需要使用for...in..循环// 使用for...in..循环可以遍历对象的每个键for(var k in obj){    //语法console.log('属性'+k+'的值时'+obj[k])}

3、对象的深浅克隆

浅克隆

        //如果某个属性值是函数，则它也被称为对象的“方法var obj2 = {fn: function () {console.log('我是方法')}}obj2.fn()// 对象 的遍历// 和遍历数组类似，对象也可以被遍历，遍历对象需要使用for...in..循环// 使用for...in..循环可以遍历对象的每个键for(var k in obj){    //语法console.log('属性'+k+'的值时'+obj[k])}

深克隆

        // 使用递归深克隆var cloneAll = {name: '关平',hero: "战士",hobbya: ['琴', '棋', '书', '画', { name: '貂蝉', hobbya: ['绿布'] }, [1, 2, 3, 4, 54]],}var  arr=[1,2,3,4,{name:'张飞',hero:'治疗'}]function deepClone(o) {// 数组if (Array.isArray(o)) {var result = []for (var i = 0; i < o.length; i++) {result.push(deepClone(o[i]))}// 对象} else if (typeof o == 'object') {var result = {}for (var k in o) {result[k] = deepClone(o[k])}} else {// 基本类型值var result = o}return result}var getObj = deepClone(cloneAll)getObj.hobbya.push(12000)console.log(cloneAll)//{name: "关平", hero: "战士", hobbya: Array(6)}console.log(getObj) //{name: "关平", hero: "战士", hobbya: Array(7)}var  getArr=deepClone(arr)getArr[4].sex='男女'console.log(getArr)//(5) [1, 2, 3, 4, {name: "张飞", hero: "治疗", sex: "男女"}]console.log(arr) //(5) [1, 2, 3, 4, {name: "张飞", hero: "治疗"}]

二、认识函数的上下文

1、什么是上下文？

函数的上下文？
函数中可以使用this关键字，它表示函数的上下文
与中文中“这”类似，函数中的this具体指代什么必须通过调用函数时的“前言后语”来判断

        var obj = {name: '云樱',hero: '刺客',sayHello: function () {console.log(`大喳好，我是${this.name},我为${this.hero}代言`)}}obj.sayHello() //大喳好，我是云樱,我为刺客代言   ==>this指向是当前对象var say = obj.sayHellosay()  //大喳好，我是,我为undefined代言  ==》this 指向是window函数的的上下文由调用方式决定同一个函数，用不同的形式调用它，则函数的上下文不同

2、上下文规则

规则1：对象打点调用它的方法函数，则函数的上下文是这个打点的对象function fn() {console.log(this.a + this.b)}var obj = {a: 10,b: 20,fn: fn}obj.fn() //30规则2：圆括号直接调用函数，则函数的上下文是window对规则3：数组（类数组对象）枚举出函数进行调用，上下文是这个数组（类数组对象）var arr = [1, 2, 3, function () { console.log(this[0]) }]arr[3]()  // 1类数组对象？所有键名为自然数序列（从e开始），且有1ength属性的对象 （伪数组）arguments对象是最常见的类数组对象，它是函数的实参列表规则4：IIFE中的函数，上下文是window对象
规则5：定时器、延时器调用函数，上下文是window对象
规则6：事件处理函数的上下文是绑定事件的DOM元素         function students() {console.log(`我是${this.name},今年${this.age}了`)}var objs = { name: '小邝', age: '40' }        function students() {console.log(`我是${this.name},今年${this.age}了`)}var objs = { name: '小邝', age: '40' }students.call(objs)students.apply(objs)students.call(objs)students.apply(objs)

3、call、apply、bind

call和apply能指定函数的上下文
语法：函数.call(上下文) 、函数.apply(上下文)

        function students() {console.log(`我是${this.name},今年${this.age}了`)}var objs = { name: '小邝', age: '40' }students.call(objs)students.apply(objs)students.bind(objs)()

call、apply、bind 三者的区别

        function sum(a, b) {console.log(this.c + this.d + a + b)}var obj1 = {c: 10,d: 2}sum.call(obj1, 5, 3) //20 call要用逗号罗列参数sum.apply(obj1, [5, 3]) //20  apply 需要把参数写道数组中sum.bind(obj1,10)(5,6)   //bind 手动调用

4、上下文规则总结

三、构造函数

1、用new 操作符调用函数

        function fun() {this.a = 20;this.b = 10;this.m=10;if(this.a>this.b) this.m++}var objFun = new fun()console.log(objFun)  //fun {a: 20, b: 10, m: 11}

2、构造函数？

用new调用一个函数，这个函数就被称为“构造函数”，任何函数都可以是构造函数，只需要用new调用它
顾名思义，构造函数用来“构造新对象”，它内部的语句将为新对象添加若干属性和方法，完成对象的初始化
构造函数必须用new关键字调用，否则不能正常工作，正因如此，开发者约定构造函数命名时首字母要大写

        function People(name,age){this.name=name;this.age=age;this.sayHello=function(){console.log(`我是${this.name},今年我${this.age}了`)}}var hero=new People('关羽',5000)var hero1=new People('刘备',2000)hero.sayHello()  //我是关羽,今年我5000了hero.sayHello()   //我是关羽,今年我5000了

2、类与实例

Java、C++等是“面向对象”（object - oriented) 语言
Javascript是“基于对象”（object - based）语言
Javascript中的构造函数可以类比于O0语言中的“类”，写法的确类似，但和真正OO语言还是有本质不同，在后续课程还将看见Js和其他OO语言完全不同的、特有的原型特性

四、原型与原型链

1、什么是prototype？

任何函数都有prototype属性，prototype是英语“原型"的意思
prototype属性值是个对象，它默认拥有constructor属性指回函数

        function sum(a,b) {return a + b}console.log(sum.prototype)  //{constructor: ƒ}console.log(sum.prototype.constructor===sum) // true

普通函数来说的prototype属性没有任何用处，而构造函数的prototype属性非常有用
* 构造函数的prototype属性是它的实例的原型

构造函数的prototype是实例的原型
function Peoples(name, age) {this.name = name;this.age = age;
}
var students = new Peoples('尼古拉', 100)  //实例化
// 测试三角关系的是否存在
console.log(students.__proto__ === Peoples.prototype) //true

2、原型链

原型链查找Javascript规定：实例可以打点访问它的原型的属性和方法，这被称为“原型链查找"

function Students(name) {this.name = name}Students.prototype.nationality = '中国'var st = new Students('Mack')console.log(st.nationality)   // 中国console.log(st)

3、hasOwnProperty 与 in

hasownProperty方法可以检查对象是否真正“自己拥有"某属性或者方法。
in运算符只能检查某个属性或方法是否可以被对象访问，不能检查是否是自己的属性或方法

       //hasownProperty方法可以检查对象是否真正“自己拥有"某属性或者方法。console.log(Students.hasOwnProperty('name'))  // trueconsole.log(Students.hasOwnProperty('nationality'))  // false// in运算符只能检查某个属性或方法是否可以被对象访问，不能检查是否是自己的属性或方法console.log('name' in Students)console.log('nationality' in Students)

4、在Propertype上添加方法

之前，我们将方法写到了对象身上把方法直接添加到实例身上的缺点：每个实例和每个实例的方法函数都是内存中不同的函数，造成了内存的浪费
解决方法:方法写在prototype上

  // 检测同一方法是否在同一空间function isSpacce(test) {this.test = testthis.fun = function () {}}var a = new isSpacce()var b = new isSpacce()console.log(a)console.log(a.fun === b.fun) // false// 在prototype加添方法function Hero(name,weapon){this.name=name;this.weapon=weapon;}Hero.prototype.action=function(){console.log(`${this.name}在杀敌`)}var xiubei=new Hero('刘备','双刃剑')var lvbu=new Hero('吕布','方天画戟')console.log(xiubei.action===lvbu.action) // true

5、原型链的终点

         function End(name){this.name=name}var  end=new End('HI')console.log(end.__proto__.__proto__===Object.prototype) // trueconsole.log(Object.prototype.__proto__) //nullconsole.log(Object.prototype.hasOwnProperty('hasOwnProperty'))// trueconsole.log(Object.prototype.hasOwnProperty('toString'))// true

    // 数组上的原型链var arr=[23,3,,5,6,7]console.log(arr.__proto__===Array.prototype)console.log(arr.__proto__.__proto__===Object.prototype)console.log(Array.prototype.hasOwnProperty('push'))console.log(Array.prototype.hasOwnProperty('splice'))

五、继承与面向对象

1、如何实现继承？

    // 实现继承的关键在于：子类必须拥有父类的全部属性和方法，同时子类还应该能定义自己特有的属性和方法// 使用JavaScript特有的原型链特性来实现继承，是普遍的做法

        // 通过原型链实现继承function Parent(name, age, sex) {this.name = name;this.age = age;this.sex = sex;}Parent.prototype.sayHello = function () {console.log(`大喳好，我是${this.name},今年${this.age}`)}function Son(name, age) {this.name = name;this.age = age}Son.prototype = new Parent()Son.prototype.lick = function () {console.log(`我是${this.name}`)}var son = new Son('张飞', 1000)son.sayHello()

2、什么是面向对象

    // 面向对象的本质：定义不同的类，让类的实例工作// 面向对象的优点：程序编写更清晰、代码结构更严密、使代码更健壮更利于维护// 面向对象经常用到的场合：需要封装和复用性的场合（组件思维）

六、包装类

什么是包装类？
Number(）、String()和Boolean(）分别是数字、字符串、布尔值的“包装类"
很多编程语言都有“包装类”的设计，包装类的目的就是为了让基本类型值可以从它们的构造函数的prototype上获得方法

var a = new Number(123)var b = new String('小菜鸡')var c = new Boolean(true)console.log(a)console.log(typeof a) // objectconsole.log(b)console.log(typeof b)// objectconsole.log(c)console.log(typeof c)// object// 不影响值的操作console.log(a + 10) //133console.log(b.substring(1, 2)) //菜console.log(a.__proto__ === Number.prototype) //truevar e = '妹爷'console.log(e.__proto__ === String.prototype) //trueconsole.log(String.prototype.hasOwnProperty('substring')) //trueconsole.log(String.prototype.hasOwnProperty('slice'))//true

总结：
Number(）、String()和Boolean()的实例都是object类型，它们的PrimitiveValue属性存储它们的本身值
new出来的基本类型值可以正常参与运算
包装类的目的就是为了让基本类型值可以从它们的构造函数的prototype上获得方法

六、Math对象

复习：幂和开方：Math.pow(）、Math.sqrt（)
向上取整和向下取整：Math.cei1(）、Math.floor（)

1、Math.round() 四舍五入

        console.log(Math.round(2.154))   // 2console.log(Math.round(2.854)) // 3// 如何保留两位小数并四舍五入console.log(Math.round(2.854 * 100) / 100) //2.85

2、Math.max()与Math.min()

        // Math.max():可以得到参数列表的最大值 // Math.min():可以得到参数列表的最小值console.log(Math.max(1, 23, 3, 4, 6, 7))  //23console.log(Math.min(1, 23, 3, 4, 6, 7))   //1// 如何利用Math.max（）求数组最大值 ?// Math.max()要求参数必须是“罗列出来”，而不能是数组// 还记得apply方法么？它可以指定函数的上下文，并且以数组的形式传入“零散值”当做函数的参数var arr = [124, 5, 53, 89, 555]var max = Math.max.apply(null, arr)console.log(max) //555// es6写法求数组最大值console.log(Math.max(...arr)) //555

3、随机数Math.random()

        console.log(Math.random()) //[0-1]// 生成[a,b]之间的整数公式：ParseInt(Math.random()*(b-a+1))+a//[10-99]   console.log(parseInt(Math.random() * 90) + 10)

七、Data日期对象

    使用new Date（）即可得到当前时间的日期对象，它是object类型值使用new Date（2020，11，1) 即可得到指定日期的日期对象，注意第二个参数表示月份，从e开始算，11表示12月也可以是new Date（'2020-12-01’）这样的写法

        console.log(2020, 11, 20)console.log('2020-12-07')

1 、日期对像常用的方法

        var d = new Date()console.log('日期:' + d.getDate())console.log('星期:' + d.getDay())console.log('年份：' + d.getFullYear())console.log('月份：' + d.getMonth())console.log('小时：' + d.getHours())console.log('分钟：' + d.getMinutes())console.log('秒：' + d.getSeconds())

2 、时间戳

   时间戳表示1970年1月1日零点整距离某时刻的毫秒数通过getTime（）方法或者Date.parse（）函数可以将日期对象变为时间戳通过new Date（时间戳）的写法，可以将时间戳变为日期对象

        // 显示时间戳的两种方法，时间戳表示1970年1月1日距离此时的事件毫秒数console.log(d1.getTime())   // 精确到好毫秒console.log(Date.parse(d1)) // 精确到秒，也是毫秒数，最后一定是三位000// 如何把时间戳转日期对象console.log(new Date(1625036812000)) //Wed Jun 30 2021 15:06:52 GMT+0800 (中国标准时间)

3 、倒计时小案例 (高考倒计时)

        function countDown() {var nd = new Date()// 目标日期，是5表示6月var ed = new Date(2022, 5, 7)// 相差毫秒数var diff = ed - nd// 换算diff 为天、时分秒// //换算为多少天，除以一天的总毫秒数，不就是换算为多少天么var day = parseInt(diff / (1000 * 60 * 60 * 24))// 零多少小时呢？？差的总毫秒数与1天的毫秒数的相除的余数，就是零头的毫秒数var hours = parseInt(diff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60))// 分var minutes = parseInt(diff % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) / (1000 * 60))// 秒var seconds = parseInt(diff % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) % (1000 * 60) / 1000)console.log(`${day}-${hours}-${minutes}-${seconds}`)}setInterval(() => {countDown()}, 1000);

javaScript学习笔记（六）面向对象相关推荐

javascript 学习笔记之面向对象编程（二）：继承多态
~~接上篇~~上一篇实现了类的实现以及类成员变量和方法的定义,下面我们来了解下面向对象中两个最重要的特性:继承和多态. 继承 js中同样可以实现类的继承这一面向对象特性,继承父类中的所有成员(变量和属 ...
Java学习笔记六、面向对象编程中级部分
Java学习笔记六.面向对象编程中级部分包包的注意事项和使用细节访问修饰符访问修饰符的注意事项和使用细节面向对象编程三大特征封装封装的实现步骤(三步) 继承继承的细节问题继承的本质 ...
JavaScript学习笔记（六）(Jquery入门)
JavaScript学习笔记(六) 一.jQuery是什么? 二.jQuery的安装三.载入事件区别四.jQuery对象和DOM对象的区别 DOM对象和Jquery对象互转五.选择器 5.1 j ...
JavaScript学习笔记（六）--数组
数组初始化我们都知道,数组是用于保存多个值的集合,在数组中,值被称为元素,值可以是任意的数据类型.在Javascript中,创建数组通常有两种方式:字面量和构造函数. 字面量数组的元素可以是任意的 ...
JavaScript学习笔记（四）---闭包、递归、柯里化函数、继承、深浅拷贝、设计模式
JavaScript学习笔记(四)---闭包.递归.柯里化函数.继承.深浅拷贝.设计模式 1. 匿名函数的使用场景 2.自运行 3.闭包 3.1前提: 3.2闭包 4.函数对象的三种定义方式 5.th ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
JS学习笔记六：js中的DOM操作
1. JS学习笔记六:js中的DOM操作文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...