javascript
JavaScript学习记录十六
原型鏈的引入
??? //如果想要使用一些屬性和方法,并且屬性的值在每個對象中都是一樣的,方法在每個對象中的操作也都是一樣,
??? //那么,為了共享數(shù)據(jù),節(jié)省內(nèi)存空間,是可以把屬性和方法通過原型的方式進行賦值
??? //實例對象的原型__proto__和構造函數(shù)的原型prototype指向是相同的
??? //實例對象中的__proto__原型指向的是構造函數(shù)中的原型prototype
??? //實例對象中__proto__是原型,瀏覽器使用的
??? //構造函數(shù)中的prototype是原型,程序員使用的
??? //原型鏈:是一種關系,實例對象和原型對象之間的關系,關系是通過原型(__proto__)來聯(lián)系的
console.log(per.__proto__==Person.prototype); true??? //構造函數(shù)中的this就是實例對象
??? //原型對象中方法中的this就是實例對象
??? ↓三處的打印是相同的
<script>function Person(age) {this.age=age;console.log(this);}Person.prototype.eat=function () {console.log(this);};var per=new Person(10);console.log(per); </script>__proto__指向分析
??? //實例對象中有__proto__原型
??? //構造函數(shù)中有prototype原型
??? //prototype是對象
??? //所以,prototype這個對象中也有__proto__,那么指向了哪里
??? //實例對象中的__proto__指向的是構造函數(shù)的prototype
??? //所以,prototype這個對象中__proto__指向的應該是某個構造函數(shù)的原型prototype
??? //per實例對象的__proto__------->Person.prototype的__proto__---->Object.prototype的__proto__是null
<script>function Person(age) {this.age=age;}var per=new Person(10);console.log(Person.prototype.__proto__==Object.prototype);//trueconsole.log(Object.prototype.__proto__); null </script>原型的指向改變，添加原型方法需要在原型改變之后
function Person(age) {this.age = age;}指向改變了Person.prototype = {eat: function () {console.log("吃");}};先添加原型方法Person.prototype.sayHi = function () {console.log("您好");};var per = new Person(10);per.sayHi();</script>實例對象和原型對象的屬性分析
??? //因為JS是一門動態(tài)類型的語言,對象沒有什么,只要點了,那么這個對象就有了這個東西,沒有這個屬性,只要對象.屬性名字,對象就有這個屬性了,但是,該屬性沒有賦值,所以,結(jié)果是:undefined
????? console.log(per.fdsfdsfsdfds);? undefined
??? //實例對象訪問這個屬性,應該先從實例對象中找,找到了就直接用，找不到就去指向的原型對象中找,找到了就使用,找不到呢?=====
??? //通過實例對象能否改變原型對象中的屬性值?不能
??? //就想改變原型對象中屬性的值,怎么辦?直接通過原型對象.屬性=值;可以改變
有趣的原型鏈
??? //原型鏈:實例對象和原型對象之間的關系,通過__proto__來聯(lián)系
? ↓ 以下是普通的div標簽的原型鏈指向
??? divObj.__proto__---->HTMLDivElement.prototype的__proto__
??? --->HTMLElement.prototype的__proto__---->Element.prototype的__proto__
??? ---->Node.prototype的__proto__---->EventTarget.prototype的__proto__
??? ---->Object.prototype沒有__proto__,所以,Object.prototype中的__proto__是null
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>title</title><script>原型鏈:實例對象和原型對象之間的關系,通過__proto__來聯(lián)系</script> </head> <body> <div id="dv"></div> <script>var divObj=document.getElementById("dv");console.dir(divObj); </script> </body> </html>繼承
??? * 面向?qū)ο缶幊趟枷?根據(jù)需求,分析對象,找到對象有什么特征和行為,通過代碼的方式來實現(xiàn)需求,要想實現(xiàn)這個需求,就要創(chuàng)建對象,要 想創(chuàng)建對象,就應該顯示有構造函數(shù),然后通過構造函數(shù)來創(chuàng)建對象.,通過對象調(diào)用屬性和方法來實現(xiàn)相應的功能及需求,即可
??? * 首先JS不是一門面向?qū)ο蟮恼Z言,JS是一門基于對象的語言,那么為什么學習js還要學習面向?qū)ο?因為面向?qū)ο蟮乃枷脒m合于人的想法,編程起來會更加的方便,及后期的維護....
??? * 面向?qū)ο蟮木幊陶Z言中有類(class)的概念(也是一種特殊的數(shù)據(jù)類型),但是JS不是面向?qū)ο蟮恼Z言,所以,JS中沒有類(class),但是JS可以模擬面向?qū)ο蟮乃枷刖幊?JS中會通過構造函數(shù)來模擬類的概念(class)
??? * 共同的特征和行為
??? * 特征--->屬性
??? * 行為---方法
??? *
??? * 面向?qū)ο蟮奶匦?封裝,繼承,多態(tài)
??? *
??? * 封裝:就是包裝
??? * 一個值存儲在一個變量中--封裝
??? * 一坨重復代碼放在一個函數(shù)中--封裝
??? * 一系列的屬性放在一個對象中--封裝
??? * 一些功能類似的函數(shù)(方法)放在一個對象中--封裝
??? * 好多相類似的對象放在一個js文件中---封裝
??? *
??? * 繼承: 首先繼承是一種關系,類(class)與類之間的關系,JS中沒有類,但是可以通過構造函數(shù)模擬類,然后通過原型來實現(xiàn)繼承
??? * 繼承也是為了數(shù)據(jù)共享,js中的繼承也是為了實現(xiàn)數(shù)據(jù)共享
??? *
??? * 原型作用之一:數(shù)據(jù)共享,節(jié)省內(nèi)存空間
??? * 原型作用之二:為了實現(xiàn)繼承
??? * 多態(tài):一個對象有不同的行為,或者是同一個行為針對不同的對象,產(chǎn)生不同的結(jié)果,要想有多態(tài),就要先有繼承,js中可以模擬多態(tài),但是不會去使用,也不會模擬,
實現(xiàn)繼承 function Person(name,age,sex) {this.name=name;this.sex=sex;this.age=age;}Person.prototype.eat=function () {console.log("人可以吃東西");};Person.prototype.sleep=function () {console.log("人在睡覺");};Person.prototype.play=function () {console.log("生活就是不一樣的玩法而已");};function Student(score) {this.score=score;}Student.prototype=new Person("小明",10,"男");Student.prototype.study=function () {console.log("學習很累很累的哦.");};//相同的代碼太多,造成了代碼的冗余(重復的代碼)var stu=new Student(100);console.log(stu.name);console.log(stu.age);console.log(stu.sex);stu.eat();stu.play();stu.sleep();console.log("下面的是學生對象中自己有的");console.log(stu.score);stu.study();借用構造函數(shù)
??? //為了數(shù)據(jù)共享,改變原型指向,做到了繼承---通過改變原型指向?qū)崿F(xiàn)的繼承
??? //缺陷:因為改變原型指向的同時實現(xiàn)繼承,直接初始化了屬性，繼承過來的屬性的值都是一樣的了,所以,這就是問題
??? //解決方案:繼承的時候,不用改變原型的指向,直接調(diào)用父級的構造函數(shù)的方式來為屬性賦值就可以了------借用構造函數(shù):把要繼承的父級的構造函數(shù)拿過來,使用一下就可以了
??? //借用構造函數(shù):構造函數(shù)名字.call(當前對象,屬性,屬性,屬性....);
??? //解決了屬性繼承,并且值不重復的問題
??? //缺陷:父級類別中的方法不能繼承
組合繼承
//原型實現(xiàn)繼承 //借用構造函數(shù)實現(xiàn)繼承 //組合繼承:原型繼承+借用構造函數(shù)繼承 function Person(name,age,sex) {this.name=name;this.age=age;this.sex=sex;}Person.prototype.sayHi=function () {console.log("阿涅哈斯誒呦");};function Student(name,age,sex,score) {借用構造函數(shù):屬性值重復的問題Person.call(this,name,age,sex);this.score=score;}改變原型指向----繼承Student.prototype=new Person();//不傳值Student.prototype.eat=function () {console.log("吃東西");};var stu=new Student("小黑",20,"男","100分");console.log(stu.name,stu.age,stu.sex,stu.score);小黑 20 男 100分stu.sayHi();阿涅哈斯誒呦stu.eat();吃東西拷貝繼承
var p={name:'wutong',age:12};var p1={};for(var key in p){p1[key]=p[key];}console.dir(p1);console.log(p==p1);//falsefunction Person() {}Person.prototype.name='zhangsan';Person.prototype.age=12;var p2=new Person();for(var key in Person.prototype){p2[key]=Person.prototype[key];}console.dir(p2)繼承總結(jié)
??? //繼承,類與類之間的關系,面向?qū)ο蟮恼Z言的繼承是為了多態(tài)服務的,
??? //js不是面向?qū)ο蟮恼Z言,但是可以模擬面向?qū)ο?模擬繼承.為了節(jié)省內(nèi)存空間
??? //繼承:
??? /*
??? * 原型作用: 數(shù)據(jù)共享 ，目的是:為了節(jié)省內(nèi)存空間,
??? * 原型作用: 繼承? 目的是:為了節(jié)省內(nèi)存空間
??? *
??? * 原型繼承:改變原型的指向
??? * 借用構造函數(shù)繼承:主要解決屬性的問題
??? * 組合繼承:原型繼承+借用構造函數(shù)繼承
??? * 既能解決屬性問題,又能解決方法問題
??? * 拷貝繼承:就是把對象中需要共享的屬性或者犯法,直接遍歷的方式復制到另一個對象中
逆序繼承看原型
???? *理解：通過原型實現(xiàn)了繼承，所以子初始化的時候必須調(diào)用改變的原型指向的初始化。
???? *f3? age=30? → f3.__proto__.age=20 (f1)? →? f1.__proto__.age=10;
function F1(age) {this.age = age;}function F2(age) {this.age = age;}F2.prototype = new F1(10);function F3(age) {this.age = age;}F3.prototype = new F2(20);var f3 = new F3(30);console.log(f3.age); 30函數(shù)的聲明和函數(shù)表達式
函數(shù)的聲明function f1() {console.log("我是函數(shù)");}f1();函數(shù)表達式var ff=function () {console.log("我也是一個函數(shù)");};ff();函數(shù)聲明和函數(shù)表達式的區(qū)別
??? //函數(shù)聲明如果放在if-else的語句中,在IE8的瀏覽器中會出現(xiàn)問題，函數(shù)聲明在if-else塊中，塊外無法實現(xiàn)調(diào)用
??? //以后寧愿用函數(shù)表達式,都不用函數(shù)聲明
?
if(true){function f1() {console.log("哈哈,我又變帥了");}}else{function f1() {console.log("小蘇好猥瑣");}}f1();var ff;if(true){ff=function () {console.log("哈哈,我又變帥了");};}else{ff=function () {console.log("小蘇好猥瑣");};}ff();函數(shù)中的this的指向
???? * 普通函數(shù)中的this是誰?-----window
???? * 對象.方法中的this是誰?----當前的實例對象
???? * 定時器方法中的this是誰?----window
???? * 構造函數(shù)中的this是誰?-----實例對象
???? * 原型對象方法中的this是誰?---實例對象
普通函數(shù)和構造函數(shù)
?? *語法上只有大小寫的區(qū)分，使用上構造函數(shù)通過new來實現(xiàn)調(diào)用，普通函數(shù)直接調(diào)用即可
普通函數(shù)function f1() {console.log("文能提筆控蘿莉");}f1();構造函數(shù)---通過new 來調(diào)用,創(chuàng)建對象function F1() {console.log("我是構造函數(shù),我驕傲");}var f=new F1();區(qū)分函數(shù)和對象
??? //函數(shù)是對象,對象不一定是函數(shù)
??? //對象中有__proto__原型,是對象
??? //函數(shù)中有prototype原型,是對象
?? //如果一個東西里面有prototype，又有__proto__,說明是函數(shù),也是對象
對象中有__proto__,函數(shù)中應該有prototypeconsole.dir(Math); 中有__proto__,但是沒有prorotype數(shù)組中函數(shù)的調(diào)用
?? *javascript是弱類型語言，所以數(shù)組中可以存放各種數(shù)據(jù)類型，但是為了方便遍歷，盡量存放同種類型
<script>var arr=[function () {console.log('hello world!')},function () {console.log('hello world!')}];arr.forEach(function (ele) {ele();})</script>?
總結(jié)
以上是生活随笔為你收集整理的JavaScript学习记录十六的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php创建数组填充数组的方法
- 下一篇： Spring AOP(面向切面）