<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js的封裝、繼承與多態</title> </head> <body> <script> window.onload = function() { // 封裝 var Book = function(id, name, price) { // 私有變量(在函數內部定義，函數外部訪問不到，實例化之后實例化的對象訪問不到) var num = 1 var id = id function privateFunction() { console.log('this is private') } // protected(可以訪問到函數內部的私有屬性和私有方法，在實例化之后就可以對實例化的類進行初始化拿到函數的私有屬性) this.getNum = function() { console.log(num) } this.getFunction = function() { privateFunction() } //public(實例化的之后，實例化的對象就可以訪問到了~) this.name = name this.copy = function() { console.log('this is public') } } //在Book的原型上添加的方法實例化之后可以被實例化對象繼承 Book.prototype.proFunction = function() { console.log('this is proFunction') } //在函數外部通過.語法創建的屬性和方法，只能通過該類訪問，實例化對象訪問不到 Book.setTime = function() { console.log('this is new time') } var book1 = new Book('B11', '悲慘世界', '$99') // 通過this創建的公共屬性和方法，實例化的時候會復制一遍，所以可以訪問到 console.log(book1.name) book1.copy() // 通過protected的getNum來訪問Book的私有變量 book1.getNum() book1.getFunction() // 直接通過實例來訪問私有變量是無法訪問的 // console.log(book1.num) // book1.privateFunction() // 通過prototype創建的方法可以在實例中訪問 book1.proFunction() // 直接在構造函數中.的方法實例是無法訪問的 // book1.setTime() // 只能通過構造函數來訪問 Book.setTime() // privateFunction是無法訪問的 // Book.privateFunction() // 繼承 var SuperClass = function() { var id = 1 this.name = ['javascript'] this.superValue = function() { console.log('superValue is true') console.log(id) } } SuperClass.prototype.getSuperValue = function() { return this.superValue() } var SubClass = function() { this.subValue = function() { console.log('this is subValue ') } } //繼承父類 SubClass.prototype = new SuperClass() SubClass.prototype.getSubValue = function() { return this.subValue() } var sub = new SubClass() var sub2 = new SubClass() console.log(sub) // 多態 function Add() { function zero() { return 0 } function one(id) { return 0 + id } function two(id, name) { return 0 + id + name } this.print = function() { var arg = arguments var len = arg.length switch(len) { case 0: { return zero() } case 1: { return one(arg[0]) } case 2: { return two(arg[0], arg[1]) } } } } var add = new Add() console.log(add.print()) console.log(add.print(1)) console.log(add.print(1, 2)) } </script> </body> </html>
ES6
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js的封裝、繼承與多態</title> </head> <body> <script> window.onload = function() { // 封裝 class School { // 構造器:創建對象完成初始化操作 constructor(id, name) { this.id = id this.name = name } // 實例方法 schoolName() { console.log(this.name) } // 類方法 static schoolOnly() { console.log('我是類方法只可通過函數本身調用') } } // 繼承 class Student extends School { constructor(sId, sName, id, name) { super(id, name) this.sId = sId this.sName = sName } studentName() { console.log(this.sName) } say() { console.log('I am a student') } } // 多態 class Teacher extends School { constructor(tId, tName, id, name) { super(id, name) this.tId = tId this.tName = tName } TeacherName() { console.log(this.tName) } say() { console.log('I am a teacher') } } // 測試 let school = new School(1, '第一小學') let student = new Student(10, 'Daming', 1, '第一小學') let teacher = new Teacher(100, 'MrLi', 1, '第一小學') console.log(student) console.log(teacher) student.studentName() student.schoolName() student.say() teacher.say() School.schoolOnly() } </script> </body> </html>