Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                
              
            
!

JS

              
                console.clear()

// ======== ES5 基本原型繼承 ========

// 待繼承的父類
function Person(firstName, lastName) {
	this.firstName = firstName
	this.lastName = lastName
	let profile = `${this.firstName}(${this.lastName})`      // 無法在實例中使用
}
// 為父類增加方法
Person.prototype.greeting = function() {
	console.log(`Hi! My name is ${this.firstName} ${this.lastName}`)
}

// 子類
function Programmer(firstName, lastName, lang) {
	Person.call(this, firstName, lastName)
	this.lang = lang
}

// 將 Person.prototype 設定為 Programmer 物件實例的 __proto__.__proto__
Programmer.prototype = Object.create(Person.prototype)
// 由於剛剛的指定,未來 Programmer 物件實例的第一層__proto__將會是一個空物件,裡面不含 constructor 屬性,這是錯誤的,__proto__ 中必須有該屬性,因此重新指定 constructor 為自己
Programmer.prototype.constructor = Programmer
// 為子類添加新的方法
Programmer.prototype.myLang = function() {
	console.log(this.lang)
}

let dylan = new Programmer('Dylan', 'Liu', 'JavaScript')
console.log(dylan)

// ======== 繼承多個 ========

// # 範例: Stundent 繼承 Person + Programmer

// 第一個要被繼承的類
function Person(name, lastName) {
    this.name = name
    this.lastName = lastName
}
// 可以寫成 
// Perso.prototype.sayFirstName = function() {...};
// Perso.prototype.sayEntireName = function() {...}
// 這樣寫就不會有 constructor 被覆蓋的問題。但是實務上方法不會只有一個,如果有很多就要重複一直寫 Person.prototype.xxx = function() {...},會比較難看,這邊用一個物件 re-assign 比較簡潔
Person.prototype = {
    sayFirstName() {
        console.log(this.name)  
    },
    sayEntireName() {
        console.log(this.name + ' ' + this.lastName)
    }
}
// 因為 prototype 被 re-assign 過,constructor 會從本來指向 Person 變成指向 「Object」,所以要重新指向回來
Person.prototype.constructor = Person

// 第二個要被繼承的類
function Programmer(programingLanguage) {
    this.programingLanguage = programingLanguage
}
Programmer.prototype = {
    sayProgramingLanguage() {
        console.log(this.programingLanguage)
    }
}
Programmer.prototype.constructor = Programmer

// 要繼承以上兩類的子類
function Student(school, name, lastName, lang) {
    Person.call(this, name, lastName)
    Programmer.call(this, lang)
    this.school = school
}

// 將 Programmer.prototype 和 Person.prototype 合併成一個物件
// 注意: Programmer.prototype 和 Person.prototype 都具有 constructor 屬性,若有重複的話, Object.assign 預設會以後面傳入的物件的屬性覆蓋前面物件的相同屬性
var extend = Object.assign(Programmer.prototype, Person.prototype)
// 雖然 Person.prototype 在後面才傳,constructor 會是 Person,但為了以防萬一還是將 constructor 指向給 Person
extend.constructor = Person
console.log('extend---', extend)
// Object.create 會將傳入的物件指向給目標物件的 __proto__,所以這邊指向的是 「 Student.prototype.__proto__ 」
Student.prototype = Object.create(extend)
console.log('Student.prototype---', Student.prototype)
// 最後再為 Student 類添加方法
Student.prototype.sayMySchool = function() {
    console.log(this.school)
}
// 最後必須再將 constructor 指向回自己,如果不做的話會是 Person,這是錯誤的
Student.prototype.constructor = Student

var me = new Student('双葉幼稚園', 'Dylan', 'Liu', 'JavaScript')
              
            
!
999px

Console