——————————
JavaScript语法结构
「对象【重】」
——————————
对象【面向对象】
== 万事万物皆为对象 ==
为什么要用对象
在记录一个数据值时,基本上都是使用变量,保存多个数据值时,可以使用数组。
对于记录数据而言,可以使用数组记录大量数据,但是数组中的数据只能通过索引值进行访问,并不明确每个数据的实际价值,而在开发中基本上每一步都需要明确每个数据的实际价值是什么,而且数据量变得非常庞大时索引也很混乱。
为了解决这种问题,使用对象的方式去解决,在对象中使用属性进行记录数据,可以通过属性名称明确数据的价值
面向对象
面向对象是一个思想
面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。
面向对象的三大特征
封装、继承、多态性
面向过程与面向对象对比
面向过程 | 面向对象 | |
---|---|---|
优点 | 性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程。 | 易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统 更加灵活、更加易于维护 |
缺点 | 不易维护、不易复用、不易扩展 | 性能比面向过程低 |
通过字面量创建对象
就是使用创建变量的方式,等号后面给一对花括号,花括号里面包含了表达这个具体事务(对象)的属性和方法,花括号里面的内容以“键值对”形式表示
键:关键词,在一个对象内是唯一的(包含:属性名、方法名)
值:数据值,可以重复完全取决于实际要求,而且数据类型不限
对象的使用
-
对象的属性
对象中存储的具体数据,属性名是键值对中的键,而存储的具体数据是键所对应的值
-
对象的方法
对象中存储的具体函数,方法名是键值对中的键,而具体的函数是键所对应的匿名函数
-
访问对象成员
- 访问对象里面的属性,通过“对象名称.属性名”方式进行访问
- 访问对象里面的属性还有一种方式,通过“对象名称[“属性名”]”方式进行访问,和数组索引访问元素方式类似,区别在于访问属性方括号中使用的是键名称,必须是字符串
- 访问对象里面的方法,通过“对象名称.方法名()”方式进行访问
总结:变量、属性及函数、方法
- 属性是对象的一个组成部分,而变量不是对象的组成成员,而且变量只是一个存储数据的容器,基本上没有任何的实际含义。
- 方法是对象的一个组成部分,而函数不是对象的组成成员,函数只是单独的封装了一些操作算法的简单容器。
通过new Object创建
var man=new Object();
Object:是复杂数据类型object的原始对象(原名称)
new:创建一个新的这个类型成员
通过new Object();会创建出来一个新的object类型的数据,而且这个数据装在man变量里面,object类型就是js代码中的所有数据类型的一个基类型。只要是我们接触的类型都是由object类型所演变而来
属性方法的添加
通过之前学习的调用的方式进行添加
var man=new Object();
man.name="张三";
man.age=20;
man.say=function(){
return "hello";
}
console.log(man.name);
console.log(man.say());
通过构造函数创建
构造方法:是一种特殊的函数,主要是用来初始化对象,也是对象的一个成员,这个成员方法特殊到调用方式为隐式调用,这个函数的执行在创建对象的时候默认执行。
其实通过new Object();这种方式创建对象时其实也使用的是调用构造函数的方式进行创建的对象
构造函数执行的价值
- 构造函数的执行必须使用new关键字搭配使用
- 构造函数执行完创建了一个构造函数所属的原始对象
- 可以通过构造函数对原始对象中的属性等进行初始化赋值
构造函数的使用
// 创建构造函数和创建函数基本上一样
function Man(参数1,参数2,...){
this.name=参数1;
this.age=参数2;
......
}
function Man(){
this.name="张三";
this.age=20;
this.say=function(){
console.log("你好");
}
}
var man1=new Man();
console.log(man1.name);
man1.say();
- 构造函数和普通函数没有什么区别
- 构造函数的函数名使用帕斯卡命名法
- 构造函数内的属性和方法创建必须使用"this.名称"方式进行创建添加
- 构造函数中不需要return返回结果
- 当创建对象的时候(构造函数的调用),必须使用new 来调用构造函数
- 使用构造函数的方式创建对象,可以称之为创建了一个类,而构造函数对这一类对象的公共部分进行了抽象处理。类和对象的概念:类是对象的抽象化概念,而对象是类的一种具体表现。
- 创建对象使用的new 对象名();特质某一类,通过new关键字创建属于这一类的一个新成员对象,这个过程类的实例化对象成员
new关键字
- 在构造函数代码开始执行之前,创建一个新对象
- 修改this的指向,把this指向实例化后的新对象
- 执行函数的代码
- 在函数完成之后,返回this。(可以通过对象中的某个函数创建这个对象自己)
遍历语法
通过遍历获取对象成员
function Man(){
this.name="张三";
this.age=20;
this.say=function(){
console.log("你好");
};
this.self=function(){
return this;
}
}
var man1=new Man();
for (var item in man1) {
console.log(item);
}
使用遍历语法对对象进行遍历,遍历到的每一个元素是对象“键值对”中的键的值,如果使用这种遍历方式进行遍历数组,那么得到的结果是每个元素的索引
构造函数和原型
静态成员和实例成员
实例成员
实例成员就是构造函数内部通过this添加的成员,实例成员只能通过实例化的对象来访问
静态成员
静态成员在构造函数本身上添加的成员,静态成员只能通过构造函数(类名)来访问
构造函数的问题
构造函数方法很好用,但是存在浪费内存的问题。一个对象的初始化主要就是凭借构造函数实现的,构造函数除了初始化对象数据之外,返回一个对象实例。
如果同一个函数能够作用到任何对象,这样就会节省很多内存
构造函数原型prototype
构造函数通过原型分配的函数是所有对象所共享的。
JavaScript 规定,每一个构造函数都有一个prototype 属性,指向另一个对象。注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。
我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。
对象原型
对象都会有一个属性 _proto_ 指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有 __proto__ 原型的存在。
__proto__对象原型和原型对象 prototype 是等价的
__proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象 prototype
constructor构造函数
对象原型( _proto_)和构造函数(prototype)原型对象里面都有一个属性 constructor 属性 ,constructor 我们称为构造函数,因为它指回构造函数本身。
constructor 主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。
一般情况下,对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法,我们可以给原型对象采取对象形式赋值,但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时,我们可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数。
如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
原型链
每一个实例对象又有一个__proto__属性,指向的构造函数的原型对象,构造函数的原型对象也是一个对象,也有__proto__属性,这样一层一层往上找就形成了原型链。
构造函数、实例和原型对象三角关系
1.构造函数的prototype属性指向了构造函数原型对象
2.实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象
3.构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性也指向了构造函数
原型链和成员的查找机制
任何对象都有原型对象,也就是prototype属性,任何原型对象也是一个对象,该对象就有__proto__属性,这样一层一层往上找,就形成了一条链,我们称此为原型链;
- 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
- 如果没有就查找它的原型(也就是 __proto__指向的 prototype 原型对象)。
- 如果还没有就查找原型对象的原型(Object的原型对象)。
- 依此类推一直找到 Object 为止(null)。
- __proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线。
原型对象中this指向
构造函数中的this和原型对象的this,都指向我们new出来的实例对象
通过原型为数组扩展内置方法
继承
call()
- call()可以调用函数
- call()可以修改this的指向,使用call()的时候 参数一是修改后的this指向,参数2,参数3…使用逗号隔开连接
子构造函数继承父构造函数中的属性
- 先定义一个父构造函数
- 再定义一个子构造函数
- 子构造函数继承父构造函数的属性(使用call方法)
借用原型对象继承方法
- 先定义一个父构造函数
- 再定义一个子构造函数
- 子构造函数继承父构造函数的属性(使用call方法)
ES5新增方法
数组方法forEach遍历数组
数组方法filter过滤数组
数组方法some
some和forEach区别
- 如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历 迭代效率更高
- 在forEach 里面 return 不会终止迭代
trim方法去除字符串两端的空格
获取对象的属性名
Object.keys(对象) 获取到当前对象中的属性名 ,返回值是一个数组
Object.defineProperty
Object.defineProperty设置或修改对象中的属性
Object.defineProperty(对象,修改或新增的属性名,{
value:修改或新增的属性的值,
writable:true/false,//如果值为false 不允许修改这个属性值
enumerable: false,//enumerable 如果值为false 则不允许遍历
configurable: false //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})
this
函数内部的this指向
这些 this 的指向,是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同,一般指向我们的调用者.
改变函数内部 this 指向
call方法
call()方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的 this 指向
应用场景: 经常做继承.
apply方法
apply() 方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的 this 指向。
应用场景: 经常跟数组有关系
bind方法
bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数,如果只是想改变 this 指向,并且不想调用这个函数的时候,可以使用bind
应用场景:不调用函数,但是还想改变this指向
call、apply、bind三者的异同
-
共同点 : 都可以改变this指向
-
不同点:
- call 和 apply 会调用函数, 并且改变函数内部this指向.
- call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
- bind 不会调用函数, 可以改变函数内部this指向.
-
应用场景
- call 经常做继承.
- apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
- bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.
高阶函数
高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出。
此时fn 就是一个高阶函数
函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数。
同理函数也可以作为返回值传递回来
闭包
变量的作用域复习
变量根据作用域的不同分为两种:全局变量和局部变量。
- 函数内部可以使用全局变量。
- 函数外部不可以使用局部变量。
- 当函数执行完毕,本作用域内的局部变量会销毁。
什么是闭包
闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解就是 ,一个作用域可以访问另外一个函数内部的局部变量。
闭包的作用
作用:延伸变量的作用范围。
END~~