javasccript进阶面向对象
ES6是javascript的新版本，ES6就是ECMAScript6（6是版本号），又称ES2015
<script>
//创建类
class star {
//constructor函数，es6内部默认构造函数，可以接受传递过来的参数，同时返回实例对象
constructor(uname) {
this.name = uname;
}
//类中添加方法
sing(song) {
console.log(this.name + '会唱' + song);
}
}
//利用类创建对象
var ldh = new star("刘德华");
console.log(ldh.name);
//类里面所有的函数都不需要写function
//类里面的函数间不可用逗号分隔
ldh.sing('冰雨');
</script>
类的继承
<script>
//类的继承
class Father {
constructor() {
}
money() {
console.log(100);
}
}
//使用extends即可让前面的类继承后面类的属性
class child extends Father {
}
var son = new child();
son.money();//100
</script>
但当遇到以下方法继承时情况会有所不同
super关键字
<script>
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
// var father = new Father(1, 2);
// father.sum();
//这里我出错的一点，将参数传入了sum的括号里，实际应该写进new Father()里
class Son extends Father{
constructor(x, y) {
this.x = x;
this.y = y;
}
}
var son = new Son(1, 2);
son.sum();//会报错
//子类将父类的函数继承了过来，但是父类的sum()函数中的this指向的是父类，所以在父类中计算会出现错误
</script>
这个时候就要使用到super关键字，super关键字用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数
<script>
class 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关键字用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数。
super(x, y); //调用了父类中的构造函数
}
}
var son = new Son(1, 2);
son.sum(); //3
</script>
super关键字访问父类上的普通函数
<script>
class Father {
say() {
return "我是爸爸";
}
}
class Son extends Father {
say() {
console.log("我是儿子");
}
}
var son = new Son();
son.say(); //输出 我是儿子
//继承中，如果实例化子类输出一个方法，先看子类有无这个方法，再去看父类
</script>
super关键字调用父类普通函数的方法
<script>
class Father {
say() {
return "我是爸爸";
}
}
class Son extends Father {
say() {
//super关键字调用父类普通函数的方法
console.log(super.say() + '的儿子');
}
}
var son = new Son();
son.say(); //输出 我是爸爸的儿子
</script>
子类继承父亲方法的同时扩展自己的方法
<script>
//子类继承父类方法的同时扩展自己的方法
class 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，必须放到this前面（必须先调用父类的构造方法，再使用子类构造方法）
super(x, y);
this.x = x;
this.y = y;
}
//子类独有的减法运算
subtract() {
console.log(this.x - this.y);
}
}
var son = new Son(5, 3);
son.subtract();
son.sum();
</script>
使用类和对象时需要注意的问题
<body>
<button>点击</button>
<script>
//1.在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
//2.类里面的共有属性和方法一定要加this使用
//3.类里面的this指向问题
//constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者
var that;
class Father {
constructor(uname) {
//在这里that指向的是constructor创建的实例化对象
that = this;
this.name = uname;
this.btn = document.querySelector('button');
this.btn.onclick = this.sing;
}
sing() {
//这个sing方法里面的this指向btn按钮，因为btn按钮调用了他
console.log(this); //<button>点击</button>
console.log("hi");
console.log(this.name); //undefined或者无输出 因为按钮里面无name属性
console.log(that.name); //小明
}
}
var father = new Father('小明');
</script>
</body>
类的概念是在ES6中才开始存在，ES6之前一直是使用构造函数和原型来模拟类的
<script>
//构造函数与原型
//创建对象的方法
//1.利用new Object()来创建对象
var obj = new Object();
//2.利用对象字面量来创建对象
var obj = {};
//3.利用构造函数来创建对象
function Star(uname, age) {
this.name = uname;
this.age = age;
this.sing = function () {
console.log('唱歌');
}
}
var ldh = new Star('刘德华', 14);
var zxy = new Star('张学友', 18);
console.log(ldh);
ldh.sing();
//构造函数虽然好用，但是会存在浪费空间的问题
console.log(ldh.sing === zxy.sing); //false,比较的是地址，而二者的复杂数据类型会分别开辟空间
//为了节省空间，我们可以使用构造函数原型prototype
</script>
1.4构造函数原型prototype
构造函数通过原型分配的函数是所有对象所共享的。
JavaScript规定,每一个构造函数都有一个prototype属性,指向另-个对象。 注意这个prototype就是一
个对象,这个对象的所有属性和方法,都会被构造函数所拥有。
我们可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法。
function Star(uname, age) { this.name = uname; this.age = age; } Star.prototype.sing = function () { console.log('我会唱歌'); } var ldh = new Star('刘德华', 14); var zxy = new Star('张学友', 18); ldh.sing(); zxy.sing(); console.log(ldh.sing === zxy.sing);//true //一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们放到原型对象身上
对象原型_proto_
对象都会有一个属性_proto_指向构造函数prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和1方法，就是因为对象有_proto_原型的存在。
对象原型（__proto__）和构造函数（prototype）原型对象里面都有一个属性constructor属性，constructor我们称为构造函数，因为它指向构造函数本身。
constructor主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。
原型链
1.9 JavaScript的成员查找机制(规则)
①当访问一一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
②如果没有就查找它的原型(也就是_ _proto_ 指向的prototype原型对象)。
③如果还没有就查找原型对象的原型( Object的原型对象)。
④依此类推一-直找到Object 为止( null)。
⑤_ proto_ 对象原型的意义就在 于为对象成员查找机制提供-个方向,或者说一条路线。
<script>
//原型对象的应用，可以扩展内置对象方法
console.log(Array.prototype);
//比如内置对象里面并没有求和函数，我们可以向里面添加一个
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());
</script>
call函数
<script>
// call可以调用函数，还可以修改函数运行时的this指向
//call(指定的this指向，普通参数，普通参数，...)
function fn() {
console.log('美好的一天');
console.log(this);
}
var o = {
name: '123'
}；
fn();
fn.call();
fn.call(o);
</script>
继承
ES6之前并没有给我们提供extends继承，我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承
借用构造函数继承父类型属性
核心原理：通过call()把父类型的this指向子类型的this,这样就可以实现子类型继承父类型的属性。
<script>
//借用父类构造函数继承属性
//父类构造函数
function Father(uname, age) {
this.name = uname;
this.age = age;
}
//子类构造函数
function Child(uname, age) {
//因为是在子类构造函数中，所以下面的this指向子类构造函数
//即通过下面这一句我们将父类构造函数中的this指向了子类构造函数
Father.call(this, uname, age);
};
var son = new Child('刘德华', 18);
console.log(son);
</script>
借用构造函数继承父类型方法
<script>
//借用原型对象继承方法
function Father(uname,age){
this.name=uname,
this.age=age
}
Father.prototype.money=function(){
console.log(100000);
}
function Son(uname,age,score){
Father.call(this,age,score);
this.score=score;
}
Son.prototype=new Father();
//如果利用对象的形式修改了原型函数，记得用constructor指回原来的原型对象
Son.prototype.constructor=Son;
//这个是子构造函数专门的方法
Son.prototype.exam=function(){
console.log('考试');
}
var son=new Son('刘德华',18,100);
console.log(son);
console.log(Father.prototype);
console.log(Son.prototype.constructor);//Son的构造函数
//如果上面没有用constructor指回原来的原型对象，上面输出结果将会是父类的构造函数
</script>
数组方法
迭代（遍历方法）：forEach(),map(),filter(),some(),every();
forEach方法
<script>
//ES5中新增的一些方法
//forEach
var arr=[1,2,3];
var sum=0;
arr.forEach(function(value,index,array){
//第一个参数为数组当前元素，第二个参数为数组当前索引，第三个参数为整个数组。
console.log('当前元素'+value);
console.log('当前索引'+index);
console.log('当前数组'+array);
sum+=value;
});
console.log(sum);
</script>
filter筛选数组方法
<script>
//filter筛选数组
//arr.filter(function(value,index,array)),第一个参数是当前数组元素，第二个是数组序列，第三个是当前整个数组
var arr = [1, 2, 3, 66, 88];
var newarr = arr.filter(function (value, index) {
return value >= 20;
});
console.log(newarr); //将数组中大于20的元素存入新数组newarr返回了回来
</script>
some查找指定元素方法
some中的方法用于检测数组中的元素是否满足指定条件，即查找数组中是否有满足条件的元素
some中的三个参数跟以上方法相同
它的返回值是布尔值，如果查找到这个元素就返回true，反之返回false.
如果找到第一个满足的的元素就会终止循环，不再查找。
<script>
//some方法
var arr = [1, 5, 66, 88];
var flag = arr.some(function (value) {
return value > 20;
});
console.log(flag);
var arr1 = ['pink', 'blue', 'skyblue'];
var flag1 = arr1.some(function (value) {
return value == 'pink';
});
console.log(flag1);
</script>
some方法与filter方法的比较
filter也是查找满足条件的元素，但不同的是filter返回的是一个数组，而且是吧所有满足条件的元素返回出来。
而some是查找满足条件的元素是否存在，返回的是一个布尔值，如果查找到第一个满足条件的元素就会终止循环
trim()方法去除字符串两端空格
此方法可以用于表单验证时去除用户输入的数据两端的空格
// trim方法去除字符串两端空格 var arr = ' andy '; console.log(arr); console.log(arr.trim()); // 表单验证去除字符串两端空格 var input = document.querySelector('input'); var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.onclick = function () { if (input.value.trim() === '') { alert('请输入内容'); } else { console.log(input.value.trim()); console.log(input.value.trim().length); div.innerHTML = input.value.trim(); } }
ES5中新增的方法
Object.defineProperty()
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
函数的定义方式
<script>
//函数的定义方式
//1.命名函数
function fn() {}
//2.匿名函数
var fun = function () {}
//3.利用new function('参数1'，'参数2','参数3')
var f = new Function('a', 'b', 'console.log(a+b)');
f(1, 2);
</script>
函数的调用方式
<script>
//函数的调用方式
//1.普通函数
function fn() {
console.log('11');
}
//fn(); fn.call()
//2.对象的方法
var o={
sayhi:function(){
console.log('喜欢你');
}
}
//3.构造函数
function Star(){
console.log('喜欢你');
}
var o=new Star();
//4.绑定事件函数
btn.onclick=function(){};
//5.定时器函数
setInterval(function(){},1000);
//6.立即执行函数
(function(){})();//立即执行函数是自动调用的
</script>
函数内的this指向
改变函数内部的this指向
JavaScript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部this的指向问题，常用的有bind(),call(),apply()三种方法.
高阶函数
高阶函数是对其它函数进行的操作，它接收函数作为参数或将函数作为返回值输出
函数也是一种数据类型，同样可以作为参数使用，最典型的就是回调函数。
闭包：闭包指有权访问另一个函数作用域变量的函数
<script> function fn(){ var num=10; return function(){ console.log(num); } } var f=fn(); f();//这样就实现了在函数外部访问函数内部的作用域变量 </script>
var lis=document.querySelectorAll('li'); //点击li打印当前索引号 for(var i=0;i<lis.length;i++){ //立即执行函数 (function(i){ lis[i].onclick=function(){ console.log(i); } })(i); }
//闭包应用-三秒钟之后，打印所有li元素的内容 var lis=document.querySelectorAll('li'); for(var i=0;i<lis.length;i++){ (function(i){ setTimeout(function(){ console.log(lis[i].innerHTML); },3000) })(i); }
利用递归遍历数据
<script>
//想要做的是输入id号,输出对应的数据
//利用forEach遍历里面的每一个对象
var data = [{
id: 1,
name: '家电',
goods: [{
id: 11,
name: '电冰箱',
goods: [{
id: 111,
name: '海尔'
}, {
id: 112,
name: '美的'
}]
}, {
id: 12,
name: '洗衣机'
}]
}, {
id: 2,
name: '服饰'
}];
function getID(json, id) {
var o = [];
json.forEach(function (item) {
if (item.id == id) {
o = item;
console.log(item);
//我们想要得到里层的数据11，12可以利用递归函数
//里面应该有goods这个数组，且数组长度不为0
} else if (item.goods && item.goods.length > 0) {
o = getID(item.goods, id);
}
});
return o;
}
getID(data, 1);
getID(data, 11);
getID(data, 111);
</script>
深拷贝的拷贝模式
<script>
//深拷贝的拷贝模式
var obj = {
id: 1,
name: '11',
msg: {
age: 18
},
arr: ['pink', 'red', 'black']
}
var o = {};
function deepCopy(newobj, oldobj) {
for (var k in oldobj) {
//判断我们的属性值属于哪种数据类型
//1.获取属性值 oldobj[k]
var item = oldobj[k];
if (item instanceof Array) {
//2.判断这个值是否是数组
newobj[k] = [];
deepCopy(newobj[k], item);
} else if (item instanceof Object) {
//3.判断这个值是否是对象
newobj[k] = {};
deepCopy(newobj[k], item);
} else {
//4.属于简单数据类型
newobj[k] = item;
}
}
}
deepCopy(o, obj);
console.log(o);
o.msg.age = 20;
console.log(obj);
</script>
正则表达式部分
1.1什么是正则表达式
正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也
是对象。
正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字
母、数字或者下划线，昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一
些敏感词(替换) ,或从字符串中获取我们想要的特定部分(提取)等。
正则表达式在js中的应用
<script>
//正则表达式在js中的使用
//1.利用RegExp对象来创建正则表达式
var regexp=new RegExp(/123/);
console.log(regexp);
//2.利用字面量创建正则表达式
var rg=/123/;
//3.test 方法用来检测字符串是否符合正则表达式要求的规范
console.log(rg.test(123));
console.log(rg.test('abc'));
</script>
表单验证案例
<style> .right { color: green; } .wrong { color: red; } </style> </head> <body> <input type="text" class="uname"><span>请输入用户名</span> <script> var uname = document.querySelector('.uname'); var span = document.querySelector("span"); var rg = /^[a-zA-Z0-9-]{6,16}$/; uname.onblur = function () { if (rg.test(this.value)) { span.className = 'right'; span.innerHTML = '输入格式正确'; } else { span.className = 'wrong'; span.innerHTML = '输入格式不正确'; } } </script> </body>
浙公网安备 33010602011771号