ES6學習資料，Es6面向?qū)ο?/h1>

發(fā)表日期：2020-07-11 文章編輯：洛壹網(wǎng)絡(luò) 文章來源：網(wǎng)站開發(fā)注意事項

面向?qū)ο?/span>

面向?qū)ο蟮奶卣鳎撼橄?、封裝、繼承、多態(tài)、重載

ES5中面向?qū)ο蟮膶懛?/span>

(推理過程課堂演示)

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, 那么構(gòu)造函數(shù)中的num優(yōu)先級高  20    function Fn(){  //this.num = 20; } //Fn.prototype.num = 10; Object.prototype.num = 30; var f = new Fn(); alert(f.num);//30

總結(jié)：原型對象上有的屬性和方法，實例對象都可以根據(jù)原型鏈找到，如果過沖突就看誰先出現(xiàn)，誰先出現(xiàn)就用誰的。（有指定的用指定的，無指定繼承最近的）

原型對象下的屬性和方法

constructor屬性

每個構(gòu)造函數(shù)都有一個原型對象，該對象下有一個默認屬性constructor指向該構(gòu)造函數(shù)。那么實例對象可以通過原型鏈也找到該屬性。

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);//?

利用該屬性可以檢測實例對象是不是由該構(gòu)造函數(shù)實現(xiàn)的。（檢測對象數(shù)據(jù)類型）

注意：constructor屬性不能被for…in遍歷的到

不經(jīng)意修改了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（）方法

每個構(gòu)造函數(shù)的原型對象下都有一個繼承自Object對象下的hasOwnProperty()方法，該方法是用來測試自己身上是不是包含該屬性。如果包含則返回true，不包含則返回false。參數(shù)是字符串形式的屬性。

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、把對象轉(zhuǎn)成字符串

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、進制轉(zhuǎn)換

1 2 3 4 5 6

var num = 255; alert( num.toString(16) );  //'ff' 3、判斷對象的數(shù)據(jù)類型 var arr = []; // alert( Object.prototype.toString.call(arr) ) alert( Object.prototype.toString.call(arr) == '[object Array]' ); //'[object Array]'

 

檢測對象的數(shù)據(jù)類型的三種方法：

1 2 3

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

對象的繼承

【什么是繼承】

在原有對象的基礎(chǔ)上，略作修改，得到一個新的對象 ， 不影響原有對象的功能

【為什么要學繼承】繼承的作用：代碼復(fù)用

【如何實現(xiàn)繼承】    屬性的繼承、方法繼承

拷貝繼承

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]; //深拷貝   } }

總結(jié)：拷貝繼承call修改this指向，for…in深拷貝。

組合繼承

利用原型鏈繼承

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();//這里主要是通過原型鏈實現(xiàn)繼承 var b1=new B(); console.log(b1.name);//繼承屬性 b1.sayName();//繼承方法

 

但是這樣繼承會帶來問題：

1、b1實例對象的constructor會變成了A

2、如果再new一個b2,那么b2的屬性和b1的屬性繼承的值如果是對象，那么他們之間將存在引用關(guān)系，耦合度比較大。

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]

上一篇：input輸入框移動端不可編輯

下一篇：前端開發(fā)常見的布局