1.原型概念：
<!-- 每個(gè)函數(shù)都有一個(gè)原型屬性 prototype 是一個(gè)指針指向一個(gè)對(duì)象
? ? ? ? ?用途是包含可以由特點(diǎn)類型的所有實(shí)例共享的屬性和方法 -->
? ? <script>
? ? ? ? function Person(name,age){
? ? ? ? ? ? this.name = name;
? ? ? ? ? ? this.age = age;
? ? ? ? ? ? this.eat = function(){
? ? ? ? ? ? ? ? document.write(`${name}${age}會(huì)吃飯`)
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? Person.prototype.eat = function (){
? ? ? ? ? ? document.write('姓名：${this.name}年齡：${this.age}會(huì)吃飯')
? ? ? ? }
? ? ? ? let p1 = new Person('zhangsan',20)
? ? ? ? let p2 = new Person('lisi',30)
? ? ? ? p1.eat()
? ? ? ? p2.eat()
? ? </script>
2.原型方法去除空格：
<script>
? ? ? ? /* function clearSpace(){
? ? ? ? } */
? ? ? ? /* 去除前面空格 */
? ? ? ? String.prototype.clearQSpace = function (){
? ? ? ? ? ? /*? ? ?return this.replace(/^\s+/,''); ?去除字符串前面空格
? ? ? ? ? ? return this.replace(/\s+$/,''); ? 去除字符串后面空格
? ? ? ? ? ? return this.replace(/^\s+|\s+$/g,''); ? ? 去除字符串中間空格? ? */
? ? ? ? ? ? return this.replace(/\s/g,''); ? ? ?/* 去除全局所有空格 */
? ? ? ? }
? ? ? ? let nStr = ' ? ? abc'.clearQSpace();
? ? ? ? console.log(nStr);
? ? </script>
3.面向?qū)ο笾^承：
<script>
? ? ? ? function Person(name,age){
? ? ? ? ? ? ?this.name = name;
? ? ? ? ? ? ?this.age = age;
? ? ? ? }
? ? ? ? let p1 = new Person('zhangsan',30)
? ? ? ? function Student (){
? ? ? ? }
? ? ? ? /* instance of 來(lái)判斷這個(gè)實(shí)例()p1是不是這個(gè)構(gòu)造函數(shù)(Person)實(shí)例化出來(lái)的對(duì)象 */
? ? ? ? console.log(p1 instanceof Student);
? ? ? ? /* 萬(wàn)物皆對(duì)象 */
? ? ? ? console.log(p1 instanceof Object);
? ? </script>
4.原型鏈實(shí)例化繼承：
<script>
? ? ? ? function Person(){
? ? ? ? ? ? this.head = 1;
? ? ? ? ? ? this.foot = 2;
? ? ? ? }
? ? ? ? function Student(name,no){
? ? ? ? ? ? this.name = name;
? ? ? ? ? ? this.no = no;
? ? ? ? }
? ? ? ? /* 讓學(xué)生類 ? 繼承 ?人類的 屬性 */
? ? ? ? Student.prototype = new Person();
? ? ? ? Student.prototype.constructor = Student;
? ? ? ? let stu1 = new Student();
? ? ? ? console.log(stu1);
? ? ? ? /* console.log(stu1.head);
? ? ? ? console.log(stu1.foot); */
? ? </script>
原型鏈實(shí)例化繼承練習(xí)：
<script>
? ? ? ? /* 寫一個(gè)類 Car color price 屬性 */
? ? ? ? /* 類 BMW 繼承Car的所有屬性 并實(shí)例化BMW這個(gè)類
? ? ? ? ? ?寫個(gè)方法可以把 color 和 price 打印到頁(yè)面上 */
? ? ? ? function Car(){
? ? ? ? ? ? this.color = '藍(lán)色';
? ? ? ? ? ? this.price = '1000w';
? ? ? ? }
? ? ? ? function BMW(){
? ? ? ? }
? ? ? ? BMW.prototype = new Car();
? ? ? ? BMW.prototype.constructor = BMW;
? ? ? ? let BMW1 = new BMW();
? ? ? ? console.log(BMW1.color);
? ? ? ? console.log(BMW1.price);
? ? </script>
5.直接繼承原型鏈：
<script>
? ? ? ? function Person(){
? ? ? ? ? ? /* this.head = 1 ;
? ? ? ? ? ? this.foot = 2 ; */
? ? ? ? }
? ? ? ? Person.prototype.head = 1;
? ? ? ? Person.prototype.foot = 2;
? ? ? ? let p1 = new Person
? ? ? ? function Student(){
? ? ? ? }
? ? ? ? /* Student 想要繼承Person的屬性 */
? ? ? ? /* 直接繼承 prototype*/
? ? ? ? Student.prototype = Person.prototype;
? ? ? ? let stu1 = new Student();
? ? ? ? /* console.log(stu1.head);
? ? ? ? console.log(stu1.foot);
? ? ? ? console.log('stu1',stu1); */
? ? ? ? /* 缺點(diǎn)：
? ? ? ? ? ?任何對(duì)Student.prototype的修改，都會(huì)反映到Person.prototype */
? ? ? ? Student.prototype.name = 'zhangsan'
? ? ? ? console.log('p1',p1);
? ? </script>
直接繼承原型鏈練習(xí)：
?<!-- 寫一個(gè)類Car color price 屬性 使用直接繼承prototype的方式實(shí)現(xiàn)
? ? ? ? ?類Bmw 繼承car 的所有屬性 并實(shí)例化Bmw這個(gè)類
? ? ? ? ?寫個(gè)方法把 color 和price 打印到頁(yè)面上 ?-->
? ? <script>
? ? ? ? function Car(){
? ? ? ? }
? ? ? ? Car.prototype.color = '白色'
? ? ? ? Car.prototype.price = '100w'
? ? ? ? function Bmw(){
? ? ? ? ? ? this.print = function (){
? ? ? ? ? ? ? ? document.write(`${this.color}--${this.price}`)
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? Bmw.prototype = Car.prototype
? ? ? ? let b1 = new Bmw();
? ? ? ? b1.print()
? ? </script>
6.利用空對(duì)象作為中介繼承以及空對(duì)象封裝：
<script>
? ? ? ? /**
? ? ? ? ?* @param 子類
? ? ? ? ?* @param 父類
? ? ? ? ?* */
? ? ? ? function extend(child, parent) {
? ? ? ? ? ? function f() { }
? ? ? ? ? ? f.prototype = parent.prototype;
? ? ? ? ? ? child.prototype = new f();
? ? ? ? ? ? child.prototype.constructor = child;
? ? ? ? }
? ? ? ? // Object.prototype.foot = 2;
? ? ? ? /*
? ? ? ? ? ? 空對(duì)象屑埋，幾乎不占內(nèi)存
? ? ? ? ? ? 修改Student的prototype對(duì)象弦叶，不會(huì)影響到Person的prototype對(duì)象
? ? ? ? */
? ? ? ? /* 父類 */
? ? ? ? function Person() { }
? ? ? ? Person.prototype.head = 1;
? ? ? ? Person.prototype.foot = 2;
? ? ? ? /* 子類想繼承父類的屬性 */
? ? ? ? function Student() { }
? ? ? ? /* 新建一個(gè)空對(duì)象 */
? ? ? ? // ? ?function f(){}
? ? ? ? // ? ?/* 把父類的原型直接賦值給空對(duì)象的原型上 */
? ? ? ? // ? ?f.prototype = Person.prototype;
? ? ? ? // ? ?/* 把空對(duì)象的實(shí)例化對(duì)象 給到子類的原型上 ?*/
? ? ? ? // ? ?Student.prototype = new f();
? ? ? ? // ? ?/* ★constructor構(gòu)造器都是指向自己的 */
? ? ? ? // ? ?Student.prototype.constructor = Student;
? ? ? ? extend(Student, Person)
? ? ? ? let stu1 = new Student();
? ? ? ? console.log(stu1.foot);
? ? ? ? console.log(stu1);
? ? ? ? /* 不會(huì)影響到Person的prototype對(duì)象 */
? ? ? ? // Student.prototype.age = 30;
? ? ? ? // ? ?let p = new Person();
? ? ? ? // ? ?console.log(p);
? ? ? ? /* 原型鏈就是一層一層向上找的過(guò)程 ?*/
? ? ? ? /* 原型鏈繼承就是利用了上面這種特性 */
? ? ? ? /* 寫一個(gè)類 Car color price 屬性 */
? ? ? ? /* 類 Bmw 繼承Car的所有屬性 并實(shí)例化Bmw這個(gè)類
? ? ? ? 寫個(gè)方法可以把 color 和 price 打印到頁(yè)面上 */
? ? ? ? function Car() {
? ? ? ? }
? ? ? ? Car.prototype.color = '白色'
? ? ? ? Car.prototype.price = '100w'
? ? ? ? // function f(){}
? ? ? ? // f.prototype = Car.prototype;
? ? ? ? // Bmw.prototype = new f();
? ? ? ? // Bmw.prototype.constructor = Bmw;
? ? ? ? extend(Bmw, Car)
? ? ? ? function Bmw() {
? ? ? ? ? ? this.print = function () {
? ? ? ? ? ? ? ? document.write(`${this.color}--${this.price}`);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? let b1 = new Bmw();
? ? ? ? b1.print();
? ? </script>
