特征:封装性、继承性、多态性。
优点:易维护、易复用、易扩展等。可设计出低耦合系统,更灵活、更易于维护。
缺点:性能比面向过程低。
————————
ES5
1.类和对象
面向对象的思维特点:1.抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板)。
2.对类进行实例化、获取类的对象。
对象:一组无序的相关属性和方法的集合,所有事物都是对象。
对象是由属性和方法组成的:属性:事物的特征,在对象中用属性来表示(常用名词)
方法:事物的行为,在对象中用方法来表示(常用动词)
类:可以用class关键字声明一个类,之后以这个类来实例化对象。
类抽象了对象的公共部分,泛指某一大类(class)
对象特指某一个,通过实例化一个具体的对象。
创建类:
class classname{ }
创建实例:
var xx=new classname(uname);
类constructor构造函数,只要有new就自动调用这个函数,构造函数不需加function
class classname{
constructor(uname){
this.uname=uname;
}
}
类中添加方法
class classname{
constructor(uname){
this.uname=uname;
}//全都不要逗号分隔
f(){//类中函数也不需要加function
//函数内容
}
}
类的继承
父类
calss Father{
constructor(){ }
money(){ }
}
子类
class Son extends Father{ }
子类继承了父类的方法
var son=new Son();
son.money();
*子类继承父类带参数的方法
父类
calss Father{
constructor(x,y){
this.x=x;
this.y=y;
}
sum(){
console.log(this.x+this.y);
}
}
子类
class Son extends Father{
constructor(x,y){
super(x,y);//调用父类中的构造函数
}
}
子类继承了父类的方法
var son=new Son(1,2);
son.sum();
就近原则:子类中有该方法就调用该方法,若无才去父类中查找该方法
class Father{
say(){
//1
}
}
class Son extends Father{
say(){
//2
若该种情况子类想调用父类方法,可在此处:super.say();
}
}//子类调用的是自己的函数
super必须放在this前
class Father{
constructor(x,y){
this.x=x;
this.y=y;
}
}
class Son extends Father{
constructor(x,y){
super(x,y);//注意
this.x=x;
this.y=y;
}
}
*先有类才能实例化对象,且在类中其他的方法中调用construtor函数参数记得要加this,
同样的,在construtor中调用类中其他方法,也得加this。
类中this的指向
constructor里面的this指向的是创建的实例对象
方法中的this指向的是实例对象(即谁调用指向谁)
2.追加元素
appendChild不支持追加字符串的子元素,insertAdjacentHTML支持追加字符串的元素。
var str='追加元素的HTML语句';
被追加.insertAdjacentHTML(追加的位置,str);
阻止冒泡:e.stopPropagetion();
手动调用点击事件,不需要鼠标触发:.click();其他事件也可。
小技巧:a&&b,a为真,执行b。
双击禁止选定文字:window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
表单失去焦点事件:onblur();
3.构造函数和原型
构造函数+原型实现面向对象,特点:
1.构造函数有原型对象prototype
2.构造函数原型对象prototype里有construtor指向构造函数本身
3.构造函数可以通过原型对象添加方法
4.构造函数创建的实例对象有__proto__原型指向构造函数的原型对象
创建对象的三种方式:
利用new Object()创建对象:var obj1=new Object();
利用对象字面量创建对象:var obj2={};
利用构造函数创建对象:
function Star(uname,age){//一般首字母大写
this.uname=uname;
this.age=age;
this.sing(){}
}
var obj3=new Star(name,age);//创建对象,实例化
new在执行时会做的四件事情:
1.在内存中创建一个新的空对象
2.让this指向这个新的对象
3.执行构造函数里面的代码,给这个新对象添加属性和方法
4.返回这个新对象(因此构造函数里不需要return)
实例成员:构造函数内部通过this添加的成员就是实例成员,只能通过实例化的对象来访问
静态成员:在构造函数本身上添加的成员。Star.sex='女';只能通过构造函数来访问obj3.sex;//错 Star.sex;//对
4.构造函数的问题:存在浪费内存的问题。每实例一个对象就会开辟一个内存空间去存放同一个函数,如上面的sing()函数。
5.构造函数原型:prototype
每一个构造函数都有一个prototype属性。
把共享的函数放到原型对象prototype中,解决浪费内存问题。
修改上面的函数如下:
function Star(uname,age){//一般首字母大写
this.uname=uname;
this.age=age;
//this.sing(){}
}
Star.prototype.sing=function(){}
另一种写法://会把construtor()覆盖掉
Star.prototype={
constructor:Star, //手动再去指向Star
sing:function(){},
say:function(){}
}
原型的主要作用是:共享方法。
因此,一般情况下,我们的公共属性定义到构造函数里面,公共的方法放到原型对象上面。
6.对象原型:__proto__
对象身上系统自己添加一个__proto__指向构造函数的原型对象prototype。
obj3.__proto__===Star.prototype;//true
7.构造函数、实例、原型对象三者之间的关系:
Star构造函数————通过Star.prototype指向——>Star原型对象prototype
Star原型对象prototype————通过Star.prototype.constructor指向——>Star构造函数
Star构造函数——>obj3对象实例————通过obj3.__proto__指向——>Star原型对象prototype
obj3对象实例又可以通过obj3.__proto__.constructor指回Star构造函数
8.原型链
对象成员查找规则--就近原则
1.当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
2.如果没有就查找它的原型(也就是__proto__指向的prototype原型对象)。
3.如果还没有就查找原型对象的原型(Object的原型对象—)。
4.依此类推一直找到Object为止(null)。
5.__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线。
9.this的指向
在构造函数中,里面的this指向的是对象实例obj3。
原型对象函数里面的this指向的是实例对象obj3。
10.利用原型函数扩展内置对象
可以通过原型对象,对原来的内置对象进行扩展自定义的方法,比如给数组增加自定义求偶数和的功能。
给数组加个自定义方法:
Array.prototype.sum=function(){
var sum=0;
for(var i=0;i<this.length;i++){
sum+=this[i];
}
return sum;
}
var arr=[1,2,3];
console.log(arr.sum());
console.log(Array.prototype);
var arr1=Array(1,2,3,4);
console.log(arr1.sum());
console.log(arr.concat(arr1));
11.继承
call方法:改变this的指向
function fn(x,y){
console.log('哦');
console.log(this);
console.log(x+y);
}
var o={
name:'哎呀'
};
fn();
fn.call();
fn.call(o);//改变函数指向,指向o这个对象
fn.call(o,1,2); 借用父构造函数继承属性
function Father(uname,age){
this.uname=uname;
this.age=age;
}
Father.prototype.money=function(){
console.log(10000);
}
function Son(uname,age,score){
Father.call(this,uname,age);//该this指向Son
this.score=score;
}
Son.prototype=new Father();//先
Son.prototype.constructor=Son;//再
//就可以使用父类的money方法
Son.prototype.exam=function(){
console.log('考试');
}
var pp=new Son('彭彭',18,100);
console.log(pp);
console.log(Father.prototype);
12.类的本质
class的本质其实还是function--构造函数的另外一种写法。
其有构造函数的特点:
1.类有原型对象prototype
2.类原型对象prototype里有construtor指向类本身
3.类可以通过原型对象添加方法
4.类创建的实例对象有__proto__原型指向类的原型对象
类其实是语法糖。--两种方法都可实现功能,简单的那种方法就是语法糖。
13.ES6新增的方法
数组方法
迭代(遍历)方法:forEach(),map(),filter(),some(),every();
1.arr.forEach(function(currentValue,index,arr){})
currentValue:数组当前项的值
index:数组当前项的索引
arr:数组对象本身
var arr=[1,2,3];
arr.forEach(function(value,index,array){
console.log(value);
console.log(index);
console.log(array);
})
2.arr.filter(function(currentValue,index,arr)())
主要用于筛选,返回一个新数组
var arr=[1,23,24,55];
var newArr=arr.filter(function(value,index){
return value>=20;//value值->数组
//return value%2==0;
})
console.log(newArr);
3.arr.some(function(currentValue,index,arr){})
查找数组中是否有满足条件的元素,有返回true,否则false
var arr=[1,23,24,5,6];
var flag=arr.some(function(value){
return value%2==0;//布尔值
//找到了第一个符合的元素则结束循环
});
console.log(flag);
4.every()类似some()
14.some和forEach的区别
forEach中return true了也不会结束迭代循环。
some中return true了就结束迭代循环,效率更高。
15.字符串方法
trim();去除字串两侧空格,字串中间空格保留,返回一个新字符串。
var newStr=str.trim();
16.Object.defineproperty()
定义对象中新属性或修改原有的属性
Object.defineProperty(obj,prop,descriptor);
obj:必需,目标对象
prop:必需,需定义或修改的属性的名字
descriptor:必需,目标属性所拥有的特性
descriptor:{}
value:设置属性的值,默认为undefined
writable:值是否可以重写,true/false,默认false
enumerable:目标属性是否可以被枚举,true/false,默认为false
configurable:目标属性是否可以被删除或是否可以再次修改特性true/false,默认false
var obj={
id:1,
name:'redmi',
price:1999
}
//定义/修改对象属性
Object.defineProperty(obj,'num',{//原先没有的属性则添加
value:1000
});
Object.defineProperty(obj,'id',{
writable:false//这样id就不可修改
});
Object.defineProperty(obj,'address',{
value:'中国广东',
writable:false,//
enumerable:false,//这样就不能被遍历出来
configurable:false//这样就不允许被删除了,也不能再修改descriptor里的特性了了 });
Object.defineProperty(obj,'address',{
value:'中国广东',
writable:true,
enumerable:true,
configurable:true//这样是不允许的 });
delete obj.address;
console.log(obj);
17.函数
函数的定义方式
1.自定义函数(命名函数)
function fn(){};
2.函数表达式(匿名函数)
var fun=function(){};
3.利用new Function('参数1','参数2','函数体');--比较少用,麻烦,效率低
var f=new Function('a','b','console.log(a+b)');
f(1,2);
所有函数都是Function的实例(对象)。
函数也属于对象。
函数的调用方式
1.普通函数
fn();/fn.call();
2.对象函数
o.say();
3.构造函数
new Star();
4.绑定事件函数
btn.onclick=function(){};
5.定时器函数
setInterval(function(){},1000);//定时一秒钟调用一次
6.立即执行函数
(function(){})();//自动调用
函数内this的指向
1.普通函数
fn();/fn.call();-->window
2.对象函数
o.say();-->o
3.构造函数--原型对象里的this也指向f
var f=new Star();-->f
4.绑定事件函数
btn.onclick=function(){};-->btn
5.定时器函数
setInterval(function(){},1000);-->window
6.立即执行函数
(function(){})();-->window
18.this
改变this的指向call(),apply(),bind();
call(指向的对象,...参数);
var o={name:'ooo'}
function f(a,b){};
f.call(o,1,2);-->o
call的主要作用是实现继承
function Father(uname,age){
this.uname=uname;
this.age=age;
}
function Son(uname,age){
Father.call(this,uname,age,sex);
}
apply(指向的对象,[...参数]);
与call()类似,但参数需以数组(伪数组)形式传入
apply()d的主要作用,可以利用apply借助数组内置对象求最大值
var arr=[2,33,1,66];
var max=Math.max.apply(Math,arr);
console.log(max);
bind(指向对象,...参数);--最常用
不调用(对象后面加()调用或函数再调用一次),有返回值。
当函数不需要立即调用但是又想改变函数内部的this指向,此时用bind();
btn.onclick=function(){
this.disabled=true;//this指向btn
setTimeout(function(){
this.disabled=false;//this指向window-->修改后指向了btn
}.bind(this),3000)//让this指向btn这个对象
}
三者相同点
都可以改变函数内部的this指向
区别点
1.call和apply会调用函数并且改变函数内部this指向
2.call和apply传递的参数不一样,call传递参数1,2...形式,apply必须数组形式
3.bind不会调用函数,可以改变函数内部this指向
主要应用场景
1.call经常用于继承
2.apply经常跟数组有关系,比如借助于数学对象实现数组的最大最小值
3.bind不调用函数但还是改变this的指向,比如改变定时器内部的this指向
19.严格模式
'use strict';
为整个脚本开启严格模式
<script>
'use strict';
</script>
<script>
(function(){
'use strict';
})()
</script>
为某个函数开启严格模式
function f(){
'use strict';
}
严格模式下:
变量:
1.变量必须先声明再使用
2.不能随意删除已经声明好的变量(delete)
this:
3.全局作用域中函数中this是undefined
4.如果构造函数不加new调用,this会报错
5.定时器this还是指向window
6.事件、对象还是指向调用者
函数:
7.函数里面的参数不允许有重名
8.if/for内不允许声明函数
20.高阶函数
是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出。
1.函数作为参数传递
回调函数
function f(a,b,callback){
console.log(a+b);
callback&&callback();
}
f(1,2,function(){
console.log('我是最后调用的');
})
2.函数作为返回值输出
function f(){
return function(){}
}
f();
21.闭包
指有权访问另一个函数作用域中变量的函数。
即一个作用域可以访问另一个函数作用域中变量的函数。
作用:延伸了变量的作用范围。
缺点:有可能会造成内存泄漏。
function f(){//被访问变量所在的函数就是闭包
var name='哦呀';
function fn(){
console.log(name);
}
fn();
}//f()就是闭包
或:
function f(){//被访问变量所在的函数就是闭包
var name='哦呀';
return function(){
console.log(name);
}
}
f();
f外面的作用域可以访问f内部的局部变量
var f1=f();相当于:
var f1=function fn(){
console.log(name);
}
f1();//访问到了局部变量name
22.递归
函数内部自己调用自己,这个函数就是递归函数
缺点:可能造成栈溢出,所以必须有return 退出函数
利用递归遍历数据:
var data=[
{id:1,
name:'家电',
goods:[
{
id:11,
gname:'冰箱',
},
{
id:12,
gname:'洗衣机'
}
]},
{
id:2,
name:'服饰'
}
];
1.forEach遍历每一个对象
function getId(json,id){
json.forEach(function(item){
//console.log(item);
if(item.id==id){
console.log(item);
//获取里层的数据 }else if(item.goods&&item.goods.length>0){
getId(item.goods,id);
}
})
}
console.log(getId(data,1));
console.log(getId(data,11));
2.遍历后保存
function getId(json,id){
var o={};
json.forEach(function(item){
//console.log(item);
if(item.id==id){
o=item;
//console.log(item);
//获取里层的数据
}else if(item.goods&&item.goods.length>0){
o=getId(item.goods,id);
}
})
return o;
}
console.log(getId(data,1));
console.log(getId(data,11));
23.递归浅拷贝和深拷贝
浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用。
深拷贝拷贝多层,每一级别的数据都会拷贝。
浅拷贝--同一个内存空间
var obj={//浅拷贝
id:1,
name:'oo',
msg:'200'
};
//var o={};
//for(var k in obj){
// o[k]=obj[k];
//}
//console.log(o);
//o.msg='201';//obj中msg也被改变,浅拷贝特点
浅拷贝语法糖:
Object.assign(o,obj);
深拷贝--新开辟多了一块内存空间
var obj={
id:1,
name:'oo',
msg:{
age:18
},
color:['pink','red']
};
var o={};
function deepcopy(newobj,oldobj){
for(var k in oldobj){
var item=oldobj[k];
//判断是否是数组
if(item instanceof Array){//数组也是Object,所以数组应该先筛选
newobj[k]=[];
deepcopy(newobj[k],item);
}
//判断是否是对象
else if(item instanceof Object){
newobj[k]={};
deepcopy(newobj[k],item);
}
//属于简单数据类型
else{
newobj[k]=item;
}
}
}
deepcopy(o,obj);
console.log(o);
//深拷贝修改o不会改变obj
24.正则表达式
用于匹配字符串中字符组合的模式。
作用:
1.验证表单(匹配)
2.过滤页面中一些敏感词(替换)
3.从字符串中获取想要的特定部分(提取)
特点:
1.灵活性、逻辑性和功能性非常强。
2.迅速用简单的方式达到字符串的复杂控制。
创建正则表达式
1.利用RegExp对象来创建
var regexp=new Regexp(/123/);
2.利用对象字面量创建
var rg=/123/;
测试正则表达式:
test():正则对象方法,用于检测字符串是否符合该规则,该对象返回true/false,其参数是测试字符串。
regexpObj.text()
var rg=/123/;//只要包含123的字符串
console.log(rg.test(123));
特殊字符
--元字符
边界符:
^:以谁开始
$:以谁结束
var rg=/^123/;//以123开头的字符串
var rg=/^123$/;//只有123字符串符合条件
字符类:
[]:表示有一系列字符可供选择,只要匹配其中一个就可以。
var rg=/[123]/;//只要字符串包含1/2/3就符合条件,返回true。
var rg=/^[123]$/;//123只能3选1才返回true。
var rg=/^[a-b]$/;//26个小写字母只能任选一个,“-”表示范围。
字符组合:
var rg=/^[a-zA-Z0-9_-]$/;//所有范围任选一个字符
var rg=/^[^a-zA-Z0-9_-]$/;//取反,有该范围的字符返回false.
量词符:
用来设定某个模式出现的次数
*:>=0
var reg=/^a*$/;a可以出现0次或以上次数
+:>=1
var reg=/^a+$/;a可以出现1次或以上次数
?:1||0
var reg=/^a?$/;a可以出现1次或0次
{3}:3次
var reg=/^a{3}$/;a只能出现3次
{3,}:大于等于3
var reg=/^a{3,}$/;
{3,16}:大于等于3并且小于等于16
var reg=/^a{3,16}$/;
组合:
var reg=/^[a-zA-Z0-9_-]{6,16}$/;//在范围内必须输入6-16位的字符串。
括号的总结:
[]:字符集合,匹配方括号中的任意字符。
{}:量词符,表示重复次数
var reg=/^abc{3}$/;c需重复3次(abccc),没有优先级
():优先级
var reg=/^(abc){3}$/;abc需重复3次(abcabcabc)
预定义类:
\d:数字0-9
\D:0-9除外,非数字
\w:[a-zA-Z0-9_]
\W:[^a-zA-Z0-9_]
\s:匹配空格,相当于[\t\r\n\v\f]
\S:匹配非空字符,相当于[^\t\r\n\v\f]
正则中的或者符号:|
例子:3-8或4-7电话号码:
1./^\d{3}-\d{8}|\d{4}-\d{7}$/
2./^\d{3,4}-\d{7,8}$/貌似有bug
中文字符:[\u4e00-\u9fa5]
正则表达式的替换
replace()方法实现替换字符串操作,用来替换的参数可以是一个字符串或是一个正则表达式。
stringObject.replace(regexp/substr,replacement)
第一个参数:被替换的字符串或者正则表达式
第二个参数:替换为的字符串
返回值是一个替换完毕的新字符串
var str='abc和def';
var news1=str.replace('abc','ghi');
var news2=str.replace(/\w{3}/,'jkl');
console.log(news1);
console.log(news2);
正则表达式参数:/表达式/[switch]
switch值:
g:全局匹配
i:忽略大小写
gi:全局匹配加忽略大小写
var news2=str.replace(/\w{3}/g,'jkl');
//所有符合正则表达式的子串都被替换
25.ES6
let可以防止循环变量变为全局变量。
结构赋值
ES6允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现结构。
数组结构
let [a,b,c,d]=[1,2,3];
a=1;b=2;c=3;d=undefined;
对象结构
let person={name:'jenny',age:18,sex:'女'};
let {name,age,sex}=person;
let {name:myName,age:myAge,sex:mySex}=person;
console.log(myName);
26.箭头函数()=>{}
定义
const fn=()=>{
console.log(1);
};fn();
函数体只有一句代码且代码执行结果就是函数返回值,函数体{}可以省略。
const sum=(n1,n2)=>n1+n2;
sum(2,3);
形参只有一个,形参外()可以省略。
const fn=n=>console.log(n);
fn(5);
箭头函数定义在哪,this就指向哪。
function fn(){//函数有作用域,对象没有,this只会指向作用域中的属性
console.log(this);
return ()=>{
console.log(this);
}
}//两个this都指向了obj
const obj={name:'jenny'};
const reFn=fn.call(obj);
reFn();
27.Array的扩展方法
扩展运算符(...)
1.可以将数组或者对象转为用逗号分隔的参数序列。
let ary=[1,2,3];
//...ary;
console.log(...ary);
2.可以应用于数组合并
方法1:
let ary1=[1,3,2];
let ary2=['a',3,'h'];
let ary3=[...ary1,...ary2];
方法2:
ary1.push(...ary2);
console.log(ary1);
3.将类数组或可遍历对象转换为真正的数组
--之后可调用数组拥有的方法
构造函数方法:Array.from()
可接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
var arrayLike={
"0":"1",
"1":"2",
"length":2
}//伪数组
var arr=Array.from(arrayLike,item=>item*2);
console.log(arr);
实例方法:find()
用于找出第一个符合条件的数组成员,如果没找到返回undefined;
var arr=[{
id:1,
name:'andy'
},{
id:2,
name:'jenny'
}];
let target=arr.find(item=>item.id==2);
console.log(target);
实例方法:findindex()
用于找出第一个符合条件的数组成员的位置,如果没找到返回-1
let arr=[10,20,30];
let n=arr.findindex(item=>item>15);
console.log(n);
实例方法:includes()
表示某个数组是否包含给定的值,返回布尔值。
[2,1,2,24].includes(24);//true
28.String的扩展方法
模板字符串
换行、空字符串会保留。
let arr=`这是一个模板字符串`;
let name='jenny';
let arr2=`我的名字是${name}`;//调用属性
console.log(arr2);
const fn=()=>{
return '我是fn函数';
}
let arr3=`我是模板字符串 ${fn()}`;//调用函数
console.log(arr3);
实例方法:startsWith()和endsWith()
表示参数字符串是否在源字符串的头/尾部,返回布尔值。
let arr='Hello world';
arr.startsWith('Hello');//true
实例方法:repeat()
表示将原字符串重复n次,返回一个新字符串。
let arr='x'.repeat(3);//xxx
29.Set数据结构
类似数组,成员唯一,没有重复值,会自动过滤重复值。
const s1=new Set();
console.log(s1.size);//s1长度为0
const s2=new Set(["a","b"]);
console.log(s2.size);//s2长度为2
实例方法:
add(value):添加某个值,返回Set结构本身
delete(value):删除某个值,返回一个布尔值,表示删除是否成功
has(value):返回一个布尔值,表示该值是否为Set的成员
clear():清除所有成员,没有返回值
const s=new Set();
s.add(1).add(2).add(3).add(3);
s.delete(2);
s.has(2);
console.log(s.size);
遍历:
const s=new Set(['a','b','c']);
s.forEach(value=>{
console.log(value);
})
————学习笔记
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。