借用构造函数 组合继承 拷贝继承 总结继承
生活随笔
收集整理的這篇文章主要介紹了
借用构造函数 组合继承 拷贝继承 总结继承
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
借用構造函數
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>// function Person(name,age,sex,weight){// this.name = name;// this.age = age;// this.sex = sex;// this.weight = weight;// }// Person.prototype.sayHi = function(){// console.log("您好");// };// function Student(score){// this.score = score;// }// // 希望人的類別中的數據可以共享給學生----繼承// Student.prototype = new Person("小明",10,"男","50kg");// var stu1 = new Student(100);// console.log(stu1.name,stu1.age,stu1.sex,stu1.weight,stu1.score);// stu1.sayHi();// var stu2 = new Student(120);// stu2.name = "張三";// stu2.age = 20;// stu2.sex = "女";// console.log(stu2.name,stu2.age,stu2.sex,stu2.weight,stu2.score);// stu2.sayHi();// var stu4 = new Student(150);// console.log(stu4.name,stu4.age,stu4.sex,stu4.weight,stu4.score);// stu4.sayHi();// 為了數據共享,改變原型指向,做到了繼承----通過改變原型指向是實現的繼承// 缺陷:因為改變原型指向的同時實現繼承,直接初始化了屬性,// 繼承過來的屬性的值都是一樣的,所以,這就是問題// 只能重新調用對象的屬性進行重新賦值// 解決方案:繼承的時候,不用改變原型的指向,直接調用父級的構造函數的方式來// 為屬性賦值就可以了----借用構造函數:把要繼承的父級的構造函數拿過來,使用// 一下就可以了// 借用構造函數:構造函數名字.call(當前對象,屬性,屬性,.....)// 解決了屬性繼承,并且值不重復的問題// 缺陷:父級類別中的方法不能繼承function Person(name,age,sex,weight){this.name = name;this.age = age;this.sex = sex;this.weight = weight;}Person.prototype.sayHi = function(){console.log("您好");};function Student(name,age,sex,weight,score){Person.call(this,name,age,sex,weight);this.score = score;}var stu1 = new Student("小明",10,"男","10kg",100);console.log(stu1.name,stu1.age,stu1.sex,stu1.weight,stu1.score);var stu2 = new Student("小紅",20,"女","40kg",120);console.log(stu2.name,stu2.age,stu2.sex,stu2.weight,stu2.score);var stu4 = new Student("小麗",50,"男","80kg",150);console.log(stu4.name,stu4.age,stu4.sex,stu4.weight,stu4.score);</script> </head> <body></body> </html>組合繼承
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>// 原型實現繼承// 借用構造函數實現繼承// 組合繼承:原型繼承+借用構造函數繼承function Person(name,age,sex){this.name = name;this.age = age;this.sex = sex;}Person.prototype.sayHi = function(){console.log("hello");};function Student(name,age,sex,score){// 借用構造函數:屬性值重復的問題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);stu.sayHi();stu.eat();// 屬性和方法都被繼承了var stu2 = new Student("小白",20,"女","100分");console.log(stu2.name,stu2.age,stu2.sex,stu2.score);stu2.sayHi();stu2.eat();</script> </head> <body></body> </html>拷貝繼承
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>// 拷貝繼承:把一個對象中的屬性和方法直接復制到另一個對象中// var obj1 = {// name:"小糊涂",// age:20,// sleep:function(){// console.log("睡覺了");// }// };// 改變了地址的指向// var obj2 = obj1;// console.log(obj2.name,obj2.age);// obj2.sleep();// 拷貝繼承:把一個對象中的屬性和方法直接復制到另一個對象中// var obj1 = {// name:"小糊涂",// age:20,// sleep:function(){// console.log("睡覺了");// }// };// // 改變了地址的指向// var obj2 = {};// for(var key in obj1){// // obj2.name = obj1.name;// obj2[key] = obj1[key];// }// console.log(obj2.namefunction Person(){}Person.prototype.age = 10;Person.prototype.sex = "男";Person.prototype.height = 100;Person.prototype.play = function(){console.log("玩的好開心");};var obj2 = {};// Person的構造中有原型prototype,prototype就是一個對象,那么里面的age,sex// height,play都是該對象中的屬性和方法for(var key in Person.prototype){obj2[key] = Person.prototype[key];}console.dir(obj2);obj2.play();</script> </head> <body></body> </html>總結繼承
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>// 面向對象特性:封裝,繼承,多態// 繼承,類與類之間的關系,面向對象的語言的繼承是為了多態服務的// js不是面向對象的語言,但是可以模擬面向對象.模擬繼承.為了節省內存空間// 繼承:/*** 原型作用:為了節省內存空間,數據空間,目的是為了節省空間* 原型作用:繼承 目的是:節省內存空間* * 原型繼承:改變原型指向* 借用構造函數繼承:主要解決屬性的問題* 組合繼承:原型繼承+借用構造函數繼承* 既能解決屬性問題,又能解決方法問題* 拷貝繼承:就是把對象中需要共享的屬性或者方法,直接遍歷的方式復制到另一個* 對象中* * */</script> </head> <body></body> </html>?
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的借用构造函数 组合继承 拷贝继承 总结继承的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实例对象的属性和原型对象中的属性重名问题
- 下一篇： 逆推继承看原型 函数的角色 函数声明和函