ES6学习资料，Es6面向对象

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

面向对象

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

ES5中面向对象的写法

(推理过程课堂演示)

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

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指向该构造函数。那么实例对象可以通过原型链也找到该属性。

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属性不能被for…in遍历的到

不经意修改了constructor

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。参数是字符串形式的属性。

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下面的

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、把对象转成字符串

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

2、进制转换

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]'

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

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

对象的继承

【什么是继承】

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

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

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

拷贝继承

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指向，for…in深拷贝。

组合继承

利用原型链继承

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();//继承方法

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

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

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

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]

解决：

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]

本文链接：https://www.looit.cn/news/details-12-234.html

版权声明：

1：本站所有内容均由互联网收集整理、上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，不存在任何商业目的与商业用途，如描述有误或者学术不对之处欢迎及时提出，不甚感谢。

2、如涉及版权问题，请联系我们4724325@qq.com第一时间处理；

上一篇：input输入框移动端不可编辑

下一篇：前端开发常见的布局