ES6學(xué)習(xí)資料，Es6面向?qū)ο?/h1>

發(fā)表日期：2020-07-11 11:39:06 文章編輯：洛壹網(wǎng)絡(luò) 文章來(lái)源：網(wǎng)站開(kāi)發(fā)注意事項(xiàng)

面向?qū)ο?/span>

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

ES5中面向?qū)ο蟮膶?xiě)法

(推理過(guò)程課堂演示)

1 2 3 4 5 6 7 8

function Person(name,age){   this.name = name;   this.age = age; } Person.prototype.say = function(){   console.log( "我會(huì)說(shuō)話..." ) } var p1 = new Person( "web",30 );

缺陷：代碼分成兩塊，不便于代碼的邏輯管理

原型鏈

實(shí)例對(duì)象與原型之間的鏈接，叫做原型鏈（也叫隱式原型__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);//這里就是通過(guò)原型鏈，拿到到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)先級(jí)高  20    function Fn(){  //this.num = 20; } //Fn.prototype.num = 10; Object.prototype.num = 30; var f = new Fn(); alert(f.num);//30

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

原型對(duì)象下的屬性和方法

constructor屬性

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

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

利用該屬性可以檢測(cè)實(shí)例對(duì)象是不是由該構(gòu)造函數(shù)實(shí)現(xiàn)的。（檢測(cè)對(duì)象數(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è)構(gòu)造函數(shù)的原型對(duì)象下都有一個(gè)繼承自Object對(duì)象下的hasOwnProperty()方法，該方法是用來(lái)測(cè)試自己身上是不是包含該屬性。如果包含則返回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'));//?

 

獨(dú)特的toString()方法

本地對(duì)象下面都是自帶的 , 自己寫(xiě)的對(duì)象都是通過(guò)原型鏈找object下面的

1 2 3 4 5 6 7

var arr = []; alert( arr.toString == Object.prototype.toString ); //false //這個(gè)arr.toString其實(shí)是原型對(duì)象Array.prototype.toString    function Fn(){ } var f = new Fn(); alert( f.toString == Object.prototype.toString ); //true

toString()方法的作用

1、把對(duì)象轉(zhuǎn)成字符串

1 2 3 4 5 6

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

2、進(jìn)制轉(zhuǎn)換

1 2 3 4 5 6

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

 

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

1 2 3

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

對(duì)象的繼承

【什么是繼承】

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

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

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

 

但是這樣繼承會(huì)帶來(lái)問(wèn)題：

1、b1實(shí)例對(duì)象的constructor會(huì)變成了A

2、如果再new一個(gè)b2,那么b2的屬性和b1的屬性繼承的值如果是對(duì)象，那么他們之間將存在引用關(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]

本文鏈接：http://jmtianhui.com/news/details-12-234.html

版權(quán)聲明：

1：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，并且以計(jì)算機(jī)技術(shù)研究交流為目的，僅供大家參考、學(xué)習(xí)，不存在任何商業(yè)目的與商業(yè)用途，如描述有誤或者學(xué)術(shù)不對(duì)之處歡迎及時(shí)提出，不甚感謝。

2、 如涉及版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們4724325@qq.com第一時(shí)間處理；

上一篇：input輸入框移動(dòng)端不可編輯

下一篇：前端開(kāi)發(fā)常見(jiàn)的布局