网站专题BANNER

ES6学习资料,Es6面向对象

发表日期:2020-07-11 11:39:06 文章编辑:洛壹网络 文章来源:网站开发注意事项

面向对象

面向对象的特征:抽象、封装、继承、多态、重载

ES5中面向对象的写法

(推理过程课堂演示)

1
2
3
4
5
6
7
8
function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log( "我会说话..." )
}
var p1 = new Person( "web",30 );

缺陷:代码分成两块,不便于代码的逻辑管理


原型链

实例对象与原型之间的链接,叫做原型链(也叫隐式原型__proto__

原型链的最外层 : Object.prototype

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Fn(){}
Fn.prototype.num = 10;
var f = new Fn();
alert(f.num);//这里就是通过原型链,拿到到num的   10
  
function Fn(){  this.num = 20; }
Fn.prototype.num = 10;
var f = new Fn();
alert(f.num);//这里都定义了num, 那么构造函数中的num优先级高  20
  
function Fn(){  //this.num = 20; }
//Fn.prototype.num = 10;
Object.prototype.num = 30;
var f = new Fn();
alert(f.num);//30

总结:原型对象上有的属性和方法,实例对象都可以根据原型链找到,如果过冲突就看谁先出现,谁先出现就用谁的。(有指定的用指定的,无指定继承最近的)



原型对象下的属性和方法

constructor属性

每个构造函数都有一个原型对象,该对象下有一个默认属性constructor指向该构造函数。那么实例对象可以通过原型链也找到该属性。

1
2
3
4
5
6
7
8
function Fn(){}
var f=new Fn();
console.log(Fn.prototype.constructor);//Fn
console.log(f.constructor)//Fn
var obj={name:'lc'}
console.log(obj.constructor);//?
var arr=[];
console.log(arr.constructor);//?

利用该属性可以检测实例对象是不是由该构造函数实现的。(检测对象数据类型)

注意:constructor属性不能被forin遍历的到

不经意修改了constructor

1
2
3
4
5
6
7
8
9
10
function Fn(){}
// Fn.prototype.name = '小明';  
// Fn.prototype.age = 20;
Fn.prototype = {
  //constructor : Fn,
  name : '小明',
  age : 20
};
var f = new Fn();
console.log( f.constructor );//?

hasOwnProperty()方法

每个构造函数的原型对象下都有一个继承自Object对象下的hasOwnProperty()方法,该方法是用来测试自己身上是不是包含该属性。如果包含则返回true,不包含则返回false。参数是字符串形式的属性。

1
2
3
4
5
var obj={name:'lc'}
Object.prototype.name="abc";
console.log(obj.hasOwnProperty==Object.prototype.hasOwnProperty);//?
console.log(obj.hasOwnProperty('name'));//?
console.log(Object.prototype.hasOwnProperty('name'));//?

 

独特的toString()方法

本地对象下面都是自带的 , 自己写的对象都是通过原型链找object下面的

1
2
3
4
5
6
7
var arr = [];
alert( arr.toString == Object.prototype.toString ); //false
//这个arr.toString其实是原型对象Array.prototype.toString
  
function Fn(){ }
var f = new Fn();
alert( f.toString == Object.prototype.toString ); //true


toString()方法的作用

1、把对象转成字符串

1
2
3
4
5
6
var arr = [1,2,3];
//改写本地对象下的toString方法
Array.prototype.toString = function(){
  return this.join('+');
};
alert( arr.toString() );  //'1+2+3'

2、进制转换

1
2
3
4
5
6
var num = 255;
alert( num.toString(16) );  //'ff'
3、判断对象的数据类型
var arr = [];
// alert( Object.prototype.toString.call(arr) )
alert( Object.prototype.toString.call(arr) == '[object Array]' ); //'[object Array]'

 

检测对象的数据类型的三种方法:

1
2
3
arr.constructor==Array
arr   instanceof  Array
Object.prototype.toString.call(arr) == '[object Array]'


对象的继承

【什么是继承】

在原有对象的基础上,略作修改,得到一个新的对象 不影响原有对象的功能

【为什么要学继承】继承的作用:代码复用

【如何实现继承】    属性的继承、方法继承

拷贝继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function CreatePerson(name,sex){   //父类
  this.name = name;
  this.sex = sex;
}
CreatePerson.prototype.showName = function(){
  alert( this.name );
};
  
var p1 = new CreatePerson('小明','男');
//p1.showName();
  
function CreateStar(name,sex,job){  //子类
  CreatePerson.call(this,name,sex);
  this.job = job;
   
}
  
//CreateStar.prototype = CreatePerson.prototype;//浅拷贝
  
extend( CreateStar.prototype , CreatePerson.prototype );
  
CreateStar.prototype.showJob = function(){
};
  
var p2 = new CreateStar('黄晓明','男','演员');
  
p2.showName();
  
function extend(obj1,obj2){
  for(var attr in obj2){
    obj1[attr] = obj2[attr]; //深拷贝
  }
}

总结:拷贝继承call修改this指向,forin深拷贝。


组合继承

利用原型链继承

1
2
3
4
5
6
7
8
9
10
11
function A(){
  this.name="a";
}
A.prototype.sayName=function(){
  console.log(this.name);
}
function B(){}
B.prototype=new A();//这里主要是通过原型链实现继承
var b1=new B();
console.log(b1.name);//继承属性
b1.sayName();//继承方法

 

但是这样继承会带来问题:

1b1实例对象的constructor会变成了A

2、如果再new一个b2,那么b2的属性和b1的属性继承的值如果是对象,那么他们之间将存在引用关系,耦合度比较大。

1
2
3
4
5
6
7
8
9
function A(){  this.arr=[1,2,3];}
function B(){}
B.prototype=new A();
var b1=new B();
b1.arr.push(4);
console.log(b1.constructor) //function A(){}
console.log(b1.arr);//[1,2,3,4]
var b2=new B();
console.log(b2.arr);//[1,2,3,4]


解决:

1
2
3
4
5
6
7
function A(){  this.arr=[1,2,3]; }
function B(){ A.call(this) }
B.prototype=new A();
B.prototype.constructor=B;
var b1=new B();
b1.arr.push(4);
console.log(b1.arr);//[1,2,3,4]


相关内容
我们
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器