实例对象的属性和原型对象中的属性重名问题 神奇的原型链 继承 继承案例
生活随笔
收集整理的這篇文章主要介紹了
实例对象的属性和原型对象中的属性重名问题 神奇的原型链 继承 继承案例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
實例對象的屬性和原型對象中的屬性重名問題
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>function Person(age,sex){this.age = age;this.sex = sex;}Person.prototype.sex = "女";var per = new Person(10,"男");console.log(per.sex);// 因為JS是一門動態(tài)類型的語言,對象沒有什么,只要點了,那么這個對象就有了// 這個東西,沒有這個屬性,只要對象.屬性名字,對象就有這個屬性了,但是,該屬性// 沒有賦值,所以,結(jié)果是undefinedconsole.log(per.gdagd);// 實例對象訪問這個屬性,應(yīng)該先從實例對象中找,找到了就直接用// 找不到就去原型對象中找,找到了就使用,找不到呢?// 通過實例對象能否改變原型對象中的屬性值?不能// 就想改變原型對象中屬性的值,怎么辦?直接通過原型對象.屬性=值;可以改變Person.prototype.sex = "oh my";per.sex = "人";// console.log(per.sex);// console.dir(per);</script> </head> <body></body> </html>神奇的原型鏈
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>// 原型鏈:實例對象和原型對象之間的關(guān)系,通過__proto__來聯(lián)系</script> </head> <body> <div id="dv"></div> <script>var divObj = document.getElementById("dv"); console.dir(divObj);// divObj.__proto__---->HTMLDivElement.prototype的__proto__---->HTMLElement// .prototype的__proto__---->Element.prototype的__proto__-->// Node.prototype的__proto__---->EventTarget.prototype的// __proto__---->Object.prototype沒有__proto__,所以,Object.prototype中的// __proto__是null </script></body> </html>繼承
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>/*** 面向?qū)ο蟮木幊趟枷?根據(jù)需求,分析對象,找到對象有什么特征和行為,通過* 代碼的方式來實現(xiàn)需求,要想實現(xiàn)這個需求,就要創(chuàng)建對象,就應(yīng)該先有構(gòu)造函數(shù)* 然后通過構(gòu)造函數(shù)來創(chuàng)建對象,通過對象調(diào)用屬性和方法來實現(xiàn)相應(yīng)的功能及* 需求即可** 首先JS不是一門面向?qū)ο蟮恼Z言,JS是一門基于對象的語言,那么為什么學(xué)習(xí)js還* 要學(xué)習(xí)面向?qū)ο?因為面向?qū)ο蟮乃枷脒m合于人的想法,編程起來會更加的方便,及* 后期的維護(hù)....** 面向?qū)ο蟮木幊陶Z言中有類(class)的概念(也是一種特殊的數(shù)據(jù)類型),* 但是JS不是面向?qū)ο蟮恼Z言,所以,JS中沒有類(class),但是JS可以模擬面向?qū)ο? 的思想編程,JS中會通過構(gòu)造函數(shù)來模擬類的概念(class)** ** 小明,小紅 都是人* 共同的特征和行為* 特征---->屬性* 行為---->方法** 面向?qū)ο蟮奶匦?封裝,繼承,多態(tài)** 封裝:就是包裝* 一個值存儲在一個變量中--封裝* 一坨重復(fù)的代碼放在一個函數(shù)中--封裝* 一系列的屬性放在一個對象中--封裝* 一些功能類似的函數(shù)(方法)放在一個對象中--封裝* 好多相類似的對象放在一個js文件中----封裝** 繼承:首先繼承是一種關(guān)系,類(class)與類之間的關(guān)系,JS中沒有類,但是可以通過* 構(gòu)造函數(shù)模擬類,然后通過原型來實現(xiàn)繼承* 繼承也是為了數(shù)據(jù)共享,js中的繼承也是為了實現(xiàn)數(shù)據(jù)共享** 原型作用之一:數(shù)據(jù)共享,節(jié)省內(nèi)存空間* 原型作用之二:為了實現(xiàn)繼承** 繼承是一種關(guān)系:** 父類級別和子類級別的關(guān)系** 例子:* ** 多態(tài):一個對象有不同的行為,或者是同一個行為針對不同的對象,產(chǎn)生不同的結(jié)果* 要想有多態(tài),就要先有繼承,js中可以模擬多態(tài),但是不會去使用,也不會模擬* */// js中通過原型來實現(xiàn)繼承function Person(name,age,sex){this.name = name;this.age = age;this.sex = sex;}Person.prototype.eat = function(){console.log("人可以吃東西");};Person.prototype.sleep = function(){console.log("人在睡覺");};Person.prototype.play = function(){console.log("生活就是不一樣的玩法而已");};var per = new Person("小明",10,"男");function Student(score){this.score = score;}// 改變學(xué)生的原型的指向即可====>學(xué)生和人已經(jīng)發(fā)生關(guān)系了Student.prototype = new Person("小明",10,"男");Student.prototype.study = function(){console.log("學(xué)習(xí)是很累的");};// 相同的代碼太多,造成了代碼的冗余(重復(fù)的代碼)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("下面的是學(xué)生對象中自己有的");console.log(stu.score);stu.study();</script> </head> <body></body> </html>繼承案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>// 動物有名字,有體重,有吃東西的行為// 小狗有名字,有體重,有毛色,有吃東西的行為,還有咬人的行為// 哈士奇名字,有體重,有毛色,性別,有吃東西的行為,還有咬人的行為,逗主人開心// 的行為// 動物的構(gòu)造函數(shù)function Animal(name,weight){this.name = name;this.weight = weight;}// 動物的原型的方法Animal.prototype.eat = function(){console.log("天天吃東西");};// 狗的構(gòu)造函數(shù)function Dog(color){this.color = color;}Dog.prototype = new Animal("哮天犬","50kg");Dog.prototype.bitePerson = function(){console.log("咬死你");};// 哈士奇function ErHa(sex){this.sex = sex;}ErHa.prototype = new Dog("黑白色");ErHa.prototype.playHost = function(){console.log("拆家");};var erHa = new ErHa("雄性");console.log(erHa.name,erHa.weight,erHa.color);erHa.eat();erHa.bitePerson();erHa.playHost();</script> </head> <body></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的实例对象的属性和原型对象中的属性重名问题 神奇的原型链 继承 继承案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 原型的指向是否可以改变 原型最终指向了哪
- 下一篇： 借用构造函数 组合继承 拷贝继承 总结继