首頁 > 開發者 > JavaScript
標籤：ash 沒有 doctype fun 函數 關係 建立 hello get
1、原型是什嗎？原型鏈是什嗎？
原型是一個prototype對象，用於表示類型之間的關係；
原型鏈指的是在JavaScript中對象之間的繼承是通過prototype對象指向父類對象，直到指向Object對象為止，這樣就形成了一個原型指向的鏈條，專業術語稱之為原型鏈。
舉例：
Student——>Person——>Object：學生繼承人這個類，人這個類繼承對象類；
<span style="font-size:14px;">
var Person=function(){
this.age="匿名"
}; var Student=function(){}; //建立繼承關係,prototype執行Person的一個執行個體對象 Student.prototype=new Person();
</span>
五條原型規則：
1、所有的參考型別（數組、對象、函數），都具有對象特性，即可自由擴充屬性（除了“null”以外）；
2、所有的參考型別都有一個_proto_屬性，叫隱式原型，屬性值是一個普通的對象；
3、所有的函數，都有一個prototype屬性，叫顯式原型，屬性值是一個普通的對象；
4、所有的參考型別的_proto_屬性，指向它的建構函式的prototype屬性值；
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> //所有的參考型別都具有對象屬性 var obj = {}; obj.a = 100; var arr = []; arr.a = 100; function fn(){} fn.a = 100; //所有的參考型別都有一個隱式原型 console.log(obj.__proto__); console.log(arr.__proto__); console.log(fn.__proto__); //所有的函數都有一個prototype屬性 console.log(fn.prototype); //所有的參考型別，__proto__屬性值指向它的建構函式的“prototype”屬性值 console.log(obj.__proto__ === Object.prototype); </script> </head> <body> </body></html>
5、當試圖得到一個對象的某個屬性時，如果沒有，會向它的_proto_中尋找，即去它的建構函式的prototype中尋找。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> //建構函式 function Foo(name,age){ this.name = name; } Foo.prototype.alerName = function(){ alert(this.name); } //建立執行個體 var f = new Foo(‘zhangsan‘); f.printName = function(){ console.log(this.name); } //測試 f.printName(); f.alerName(); </script> </head> <body> </body></html>
再次舉例：
Dog類繼承了Animal類，隨即擁有的Animal的eat方法（非常low的一個例子）
<script type="text/javascript"> function Animal() { this.eat = function () { console.log("animal eat"); } } function Dog() { this.bark = function () { console.log("dog bark") } } Dog.prototype = new Animal(); var hashiqi = new Dog(); hashiqi.eat(); //animal eat hashiqi.bark(); //dog bark </script>
接近實戰的例子（一個封裝DOM查詢的例子）：
//一定要非常注意JavaScript的位置<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"> <span>測試原型繼承封裝原生JavaScript</span> </div> </body> <script> function Elem(id){ this.elem = document.getElementById(id); } Elem.prototype.html = function(val){ var elem = this.elem; if(val){ elem.innerHTML = val; //鏈式操作 return this; }else{ return elem.innerHTML; } } Elem.prototype.on = function(type,fn){ var elem = this.elem; elem.addEventListener(type,fn); return this; } var div1 = new Elem(‘box‘); div1.html(‘<p>hello imooc</p>‘).on(‘click‘,function(){ alert(‘clicked‘); }).html(‘<p>javascript</p>‘); </script></html>
JavaScript中的原型和原型鏈
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
