JS(三)"/>
前端学习之JS(三)
对象高级:
构造函数:
// ES5创建1 系统构造函数:函数名首字母var cat=new Object();cat.name='咪咪';cat.age='2';console.log(cat)2 自定义构造函数function Cat(){}var cat=new Cat();cat.name='咪咪';cat.age='2';console.log(cat)// 工厂模式
function Cat(name,age){this.name=name;this.age=age;this.sayName=function(){console.log(this.name);}}var cat1=new Cat('咪咪',2);var cat2=new Cat('喵喵',3);console.log(cat1);
new关键字:
作用:
为了与构造函数连用
执行该构造函数
隐式创建了一个对象
将构造函数中的this和这个对象的this进行绑定
将this中的属性和方法传递给该对象
返回这个对象
class类:
ES6新增了class类,为了让js更像java,更像面向对象的写法
js是面向过程的语言,但是它可以模拟面向对象的写法
class类含义:是 Es5中构造函数的语法糖 语法:class 名称{constructor(){ 传属性}sayName(){ 传方法}static sayHi(){} }// ES5function Cat(name,age){this.name=name;this.age=age;this.sayName=function(){console.log(this.name);}}var cat1=new Cat('咪咪',2);var cat2=new Cat('喵喵',3);console.log(cat1);
// ES6
class Cat{constructor(name,age){this.name=name;this.age=age;}// 实例化对象的方法:通过实例化的对象调用 例子:DatesayName(){console.log(this.name);}//静态方法:通过类调用 例子:Mathstatic sayHi(){console.log('123');}
}var cat1=new Cat('咪咪',2);var cat2=new Cat('喵喵',3);console.log(cat1.name);cat1.sayName();Cat.sayHi();class Cats extends Cat{constructor(name){super(name)sayName(){console.log('Cats'+this.name);}}
}
面向对象:
含义:(OOP)
一种编程思想,只需考虑结果
特征:
封装 例如函数和class类
继承 可以使得子类具有父类的属性和方法,并重新定义,追加属性和方法
多态 不同对象调用相同的方法,执行出不同的结果
// 继承
class Cat{constructor(name,age){this.name=name;this.age=age;}SayName(){console.log(this.name);}
}
class Cats extends Cat{ //儿子继承父亲constructor(name,age,gender){super(name,age) //继承父亲的标签this.gender=gender; //自己的特色}sayAge(){ //自己的方法console.log(this.age)}SayName(){console.log('name'); //自己有自己的sayname时执行自己的sayname}
}
var cat1=new Cat('111',6);
var cats1=new Cats('lucy',3,'women');
console.log(cats1);
cat1.SayName()
cats1.SayName() //继承下来的sayName
原型对象:
含义:
简称原型,任何一个函数都有一个prototype属性,这个就是原型对象
原型链:
含义:
任何一个函数都有一个prototype属性,这个就是原型对象,原型对象还有原型,这个就 形成了一个链状结构就叫做原型链
任何一个对象都有一个属性叫__proto__,此属性指向构造函数的原型对象,最终指向null
属性查找原则:
当前对象属性查找不到时,会向改构造函数的原型对象上查找该属性,如果没查到会向object系统构造函数中查找该属性,如果依旧没有返回underfined
// 原型对象
console.log(Cat.prototype);
// 在原型对象上添加方法或属性
Cat.prototype.sayName=function(){console.log('11111');
}var arr=new Array(1,2,3); //可以改变系统属性Array.prototype.push=function(){console.log(123456);
}
arr.push(4);
console.log(arr);function Cat(){} //Cat()是函数
var Cats=new Cat(); //Cats是对象
console.log(Cats.__proto__);
console.log(Cat.prototype);
console.log(Cats.__proto__===Cat.prototype); //trueconsole.log(Object.prototype===Cats.__proto__.__proto__);
深拷贝与浅拷贝:
深拷贝:B复制A,A变了,B不变
浅拷贝:B复制A,A变了,B变了
// 深拷贝
var str='12355';
var str1=str;
str='12';
console.log(str1); // 浅拷贝
var obj={name:'lii',age:123,
}
var obj1=obj;
obj.name='ll';
console.log(obj1);// 封装深拷贝:
function deepClone (data){// 判断是数组还是对象// 方法一var deepData=Array.isArray(data)?[]:{};// 方法二// if(Array.isArray(objs)){// var deepObj=[];// }else{// var deepObj={};// }for(key in data){// 判断属性是不是自己的if(data.hasOwnProperty(key)){//多个对象if(typeof data[key]==='object'){// 递归 deepData[key]=deepClone(deepData[key]);}else{deepData[key]=data[key]; //把data值给deepData}}
}return deepData;
}
严格模式:
"use strict"
function fn(a,a){console.log(10);
}
正则表达式:
RegExp对象用于将文本与一个模式匹配
创建:
1 new+构建函数var re=new RegExp();
2 字面量式var re=/内容/
方法:
1 test() 匹配成功返回true ,否则返回false2 exec() 匹配成功返回数组,否则是null
修饰符:
i 忽略大小写
g 全局匹配
// 练习:简单的邮箱验证// 获取邮箱地址
var emails=document.querySelector('input');
var p=document.querySelector('p');
// 正则表达式
var re=/@/;
// 失去焦点时触发事件
emails.onblur=function(){var values=this.value;if( re.test(values)){p.style.color='green';p.innerHTML='邮箱合法';
}else{p.style.color='red';p.innerHTML='邮箱不合法';
}
}
字符串的正则:
match(可以放正则表达式) 获取匹配结果 返回一个数组replace(被替换,替换的) 替换 返回新的search() 执行了一个在给定字符串中的一个搜索以取得匹配正则模式的项,查找正则表达式第一次出现的索引 split() 切割string对象为了一个其字符串的数组,字符串改为数组 //test()
var re=/box/ig;
var str='this is a box,That is a Box'
var re1=/[0-9]+/g;
var str1='2021-9-25';
// console.log(re.test(str));
// 字符串
// match()
console.log(str.match(re)); //array
console.log(str1.match(re1));
// replace()console.log(str.replace(re,'123'));// search()console.log(str.search(re));
// split()
console.log(str.split(re));
元字符:
. 匹配单个的任意字符
[范围] 匹配单个范围内的字符
[0-9] 匹配单个的数字
[a-zA-Z0-9] 匹配单个的数字,字母下划线
[^范围] 匹配任意一个除括号范围内的字符
[^0-9] 匹配任意一个非数字字符
\w 匹配单个的数字,字母下划线 等价于[a-zA-Z0-9]
\W 匹配单个的非数字,字母下划线
\d 匹配单个数字 等价于[0-9]
\D 匹配单个非数字 等价于[^0-9]// // 获取邮箱地址
var emails=document.querySelector('input');
var p=document.querySelector('p');
// // 正则表达式
var re=/[0-9]/;
// 失去焦点时触发事件
emails.onblur=function(){var values=this.value;if( re.test(values)){p.style.color='green';p.innerHTML='邮箱合法';
}else{p.style.color='red';p.innerHTML='邮箱不合法';
}
}
// 纯数字验证:
var re=/^\d+$/;
var rel=/\D/;
console.log(re.test('46599545656'));
console.log(!rel.test('214465556556'));
// 不能用数字开头
var re=/^\D/;
console.log(re.test('5hjjj'));
// 验证邮编是否合法
var re=/^\d{6}$/;
console.log(re.test('123456'));
// 验证手机号是否合法
var re=/^1[3-9][0-9]{9}$/;
console.log(re.test('15345678910'));
//验证身份证是否合法
var re=/^[1-9]\d{5}[1-2]\d{3}([0][1-9]|[1][0-2])([1-2]\d|[3][0-1]\d{3}(\d|x|X))$/;
更多推荐
前端学习之JS(三)
发布评论