JavaScript面向?qū)ο笾械姆庋b和繼承你了解嗎
1、面向?qū)ο?/h2>
【三大顯著特征】: 封裝、繼承、多態(tài)
1、封裝
【解釋】: 封裝的本質(zhì)就是將有關(guān)聯(lián)的代碼組合在一起。
【優(yōu)勢(shì)】:
保證代碼可以復(fù)用提高代碼的維護(hù)效率
【以前的封裝方法】:
函數(shù)封裝
function fn(){}
命名空間封裝
let o={ name:'zhangsan', age:20 } let obj={ name:'lisi', age:18 }
【新的封裝方法】:
構(gòu)造函數(shù)
//自定義構(gòu)造函數(shù) function Person(name,age,height,weight){ this.name=name; this.age=age; this.height=height; this.weight=weight; //方法 this.eat=function(){ console.log('吃飯') } this.sleep=function(){ console.log('睡覺(jué)') } } //實(shí)例化一個(gè)對(duì)象 let obj1=new Person('zhangsan',20,'198cm','60kg') console.log(obj1) let obj2=new Person('lisi',24,'168cm','70kg') console.log(obj2)
【總結(jié)】:
構(gòu)造函數(shù)體現(xiàn)了面向?qū)ο蟮姆庋b特性構(gòu)造函數(shù)實(shí)例創(chuàng)建的對(duì)象彼此獨(dú)立、互不影響命名空間式的封裝無(wú)法保證數(shù)據(jù)的獨(dú)立性
2、原型對(duì)象
【解釋】: 本質(zhì)是構(gòu)造函數(shù)的一個(gè)屬性,prototype
的是對(duì)象類據(jù)類型,稱為構(gòu)造函數(shù)的原型對(duì)象。
【代碼示例】:
function Person(name,age){ this.name=name this.age=age //this.sing=function (){ //console.log('唱歌') //} } console.log(Person.prototype); Person.prototype.sing=function(){ console.log('唱歌') } let p1=new Person('zhangsan',20); console.log(p1) p1.sing()
【總結(jié)】:
- 只要是構(gòu)造函數(shù)就有原型對(duì)象
- 原型對(duì)象中的方法,實(shí)例對(duì)象可以直接調(diào)用
- 原型對(duì)象和構(gòu)造函數(shù)都有相同的方法的時(shí)候就使用構(gòu)造函數(shù)本身的方法
【constructor屬性】: 代表了該原型對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)。
【示例】:
function Person(name,age){ this.name=name this.age=age } console.log(Person.prototype,constructor)
【圖解】:
【__proto__屬性】: 用于指向原型對(duì)象
【示例】:
function Person(name,age){ this.name=name this,age=age } Person.prototype.eat=function(){ console.log('吃飯') } let person1=new Person('張三',22); console.log(person.__proto__===Person.prototype)
3、繼承
【封裝問(wèn)題引出】:
// 封裝中國(guó)人的行為特征 function Chinese() { // 中國(guó)人的特征 this.arms = 2; this.legs = 2; this.eyes = 2; this.skin = 'yellow'; this.language = '中文'; // 中國(guó)人的行為 this.walk = function () {} this.sing = function () {} this.sleep = function () {} } // 封裝日本人的行為特征 function Japanese() { // 日本人的特征 this.arms = 2; this.legs = 2; this.eyes = 2; this.skin = 'yellow'; this.language = '日文'; // 日本人的行為 this.walk = function () {} this.sing = function () {} this.sleep = function () {} }
【總結(jié)】:其實(shí)我們都知道無(wú)論是中國(guó)人、日本人還是其它民族,人們的大部分特征是一致的,然而體現(xiàn)在代碼中時(shí)人的相同的行為特征被重復(fù)編寫(xiě)了多次,代碼顯得十分冗余,我們可以將重復(fù)的代碼抽離出來(lái)
【代碼改寫(xiě)】:
<script> // 所有人 function Person() { // 人的特征 this.arms = 2; this.legs = 2; this.eyes = 2; // 人的行為 this.walk = function () {} this.sing = function () {} this.sleep = function () {} } // 封裝中國(guó)人的行為特征 function Chinese() { // 中國(guó)人的特征 this.skin = 'yellow'; this.language = '中文'; } // 封裝日本人的行為特征 function Japanese() { // 日本人的特征 this.skin = 'yellow'; this.language = '日文'; } // human 是構(gòu)造函數(shù) Person 的實(shí)例 let human = new Person(); // 中國(guó)人 Chinese.prototype = new Person(); Chinese.prototype.constructor = Chinese; // 日本人 Japanese.prototype = human; Japanese.prototype.constructor = Japanese;
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Javascript基礎(chǔ)_簡(jiǎn)單比較undefined和null 值
下面小編就為大家?guī)?lái)一篇Javascript基礎(chǔ)_簡(jiǎn)單比較undefined和null 值。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06JavaScript DOM學(xué)習(xí)第四章 getElementByTagNames
HTML有一些相關(guān)有不同tag名字的相關(guān)元素,比如H1-H6或者input,select和TEXTAREA。getElementByTagName只能取得那些有相同tag名稱的元素,所以你不能用他來(lái)取得所有的標(biāo)題或者整個(gè)表單內(nèi)容。2010-02-02JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記10 再訪js對(duì)象
在ECMAScript中,兩個(gè)核心主題就是對(duì)象與函數(shù),而這兩個(gè)主題也有些互相纏繞的,在前面幾個(gè)博文中大略的過(guò)了一遍函數(shù)相關(guān)的基礎(chǔ)知識(shí),這篇文章再回到對(duì)象主題上來(lái)2012-10-10JavaScript 表單處理實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript 表單處理實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04js限制文本框輸入長(zhǎng)度兩種限制方式(長(zhǎng)度、字節(jié)數(shù))
在實(shí)際應(yīng)用中根據(jù)需要會(huì)用到文本框限制字符長(zhǎng)度,以些新手朋友有們可能還不清楚如何應(yīng)付,本人搜集整理了一些常用技巧,曬出來(lái)和大家分享一下,希望可以幫助你們2012-12-12深入探討JavaScript的最基本部分之執(zhí)行上下文
今天小編就為大家分享一篇關(guān)于深入探討JavaScript的最基本部分之執(zhí)行上下文,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-02-02