Object Oriented Programming
OOP, or Object Oriented Programming, is one of the major approaches to the software development process. In OOP, objects and classes organize code to describe things and what they can do.
In this course, you’ll learn the basic principles of OOP in JavaScript, including the this keyword, prototype chains, constructors, and inheritance.
說明：物件導向程式設計OOP
Create a Basic JavaScript Object
創造一個JS的物件
let dog = {
name: “Scott”,
numLegs: 4
};
Use Dot Notation to Access the Properties of an Object
用.來取得物件的特性
let dog = {
name: “Spot”,
numLegs: 4
};
// Only change code below this line
console.log(dog.name);
console.log(dog.numLegs);
得到結果如下：
Spot
4
在物件中寫一個功能函數
let dog = {
name: “Spot”,
numLegs: 4,
sayLegs: function() {return “This dog has ” + dog.numLegs + ” legs.”;}
};
dog.sayLegs();
console.log(dog.sayLegs());
得到結果：
This dog has 4 legs.
將dog改成使用this
let dog = {
name: “Spot”,
numLegs: 4,
sayLegs: function() {return “This dog has ” + this.numLegs + ” legs.”;}
};
dog.sayLegs();
function Dog() {
this.name = “Albert”;
this.color = “blue”;
this.numLegs = 4;
}
function Dog() {
this.name = “Rupert”;
this.color = “brown”;
this.numLegs = 4;
}
// Only change code below this line
let hound = new Dog();
function Dog(name, color) {
this.name = name;
this.color = color;
this.numLegs = 4;
}
將資料存在terrier這個命名中，name是”George”，color是”White”
let terrier = new Dog(“George”, “White”);
function House(numBedrooms) {
this.numBedrooms = numBedrooms;
}
// Only change code below this line
let myHouse = new House(5);
myHouse instanceof House;
function Bird(name) {
this.name = name;
this.numLegs = 2;
}
let canary = new Bird(“Tweety”);
let ownProps = [];
// Only change code below this line
for (let property in canary) {
if(canary.hasOwnProperty(property)) {
ownProps.push(property);
}
}
刪去重複使用的程式碼
function Dog(name) {
this.name = name;
}
Dog.prototype.numLegs = 4 ;
// Only change code above this line
let beagle = new Dog(“Snoopy”);
console.log(beagle)
function Dog(name) {
this.name = name;
}
Dog.prototype.numLegs = 4;
let beagle = new Dog(“Snoopy”);
let ownProps = [];
let prototypeProps = [];
// Only change code below this line
for (let property in beagle) {
if(beagle.hasOwnProperty(property)) {
ownProps.push(property);
} else {
prototypeProps.push(property);
}
}
console.log(ownProps);
console.log(prototypeProps);
[ ‘name’ ]
[ ‘numLegs’ ]
Understand the Constructor Property
function Dog(name) {
this.name = name;
}
// Only change code below this line
function joinDogFraternity(candidate) {
if (candidate.constructor === Dog) {
return true;
} else {
return false;
}
}
Change the Prototype to a New Object
function Dog(name) {
this.name = name;
}
Dog.prototype = {
// Only change code below this line
numLegs: 4,
eat: function() {
console.log(“nom nom nom”);
},
describe: function() {
console.log(“My name is ” + this.name);
}
};
function Dog(name) {
this.name = name;
}
// Only change code below this line
Dog.prototype = {
constructor: Dog,
numLegs: 4,
eat: function() {
console.log(“nom nom nom”);
},
describe: function() {
console.log(“My name is ” + this.name);
}
};
function Dog(name) {
this.name = name;
}
let beagle = new Dog(“Snoopy”);
// Only change code below this line
Dog.prototype.isPrototypeOf(beagle);
function Dog(name) {
this.name = name;
}
let beagle = new Dog(“Snoopy”);
Dog.prototype.isPrototypeOf(beagle); // yields true
// Fix the code below so that it evaluates to true
Object.prototype.isPrototypeOf(Dog.prototype);
function Cat(name) {
this.name = name;
}
Cat.prototype = {
constructor: Cat,
eat: function() {
console.log(“nom nom nom”);
}
};
function Bear(name) {
this.name = name;
}
Bear.prototype = {
constructor: Bear,
eat: function() {
console.log(“nom nom nom”);
}
};
function Animal() { }
Animal.prototype = {
constructor: Animal,
};
簡化程式重複部分如下
function Cat(name) {
this.name = name;
}
Cat.prototype = {
constructor: Cat
};
function Bear(name) {
this.name = name;
}
Bear.prototype = {
constructor: Bear
};
function Animal() {}
Animal.prototype = {
constructor: Animal,
eat: function() {
console.log(“nom nom nom”);
}
};
function Animal() { }
Animal.prototype = {
constructor: Animal,
eat: function() {
console.log(“nom nom nom”);
}
};
// Only change code below this line
let animal = Object.create(Animal.prototype);
let duck = Object.create(Animal.prototype); // Change this line
let beagle = Object.create(Animal.prototype); // Change this line
duck.eat(); // Should print “nom nom nom”
beagle.eat(); // Should print “nom nom nom”
Dog繼承Animal()函數的功能
function Animal() { }
Animal.prototype = {
constructor: Animal,
eat: function() {
console.log(“nom nom nom”);
}
};
function Dog() { }
// Only change code below this line
Dog.prototype = Object.create(Animal.prototype);
let beagle = new Dog();
beagle.eat(); // Should print “nom nom nom”
重新設定繼承的特性
function Animal() {}
function Bird() {}
function Dog() {}
Bird.prototype = Object.create(Animal.prototype);
Dog.prototype = Object.create(Animal.prototype);
// Add your code below this line
Bird.prototype.constructor = Bird;
Dog.prototype.constructor = Dog;
let duck = new Bird();
let beagle = new Dog();
function Animal() { }
Animal.prototype.eat = function() {
console.log(“nom nom nom”);
};
function Dog() { }
// Only change code below this line
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function(){
console.log(“Woof!”)
}
// Only change code above this line
let beagle = new Dog();
beagle.eat(); // Should print “nom nom nom”
beagle.bark(); // Should print “Woof!”
取代原有的fly功能
function Bird() { }
Bird.prototype.fly = function() {
return “I am flying!”;
};
function Penguin() { }
Penguin.prototype = Object.create(Bird.prototype);
Penguin.prototype.constructor = Penguin;
// Only change code below this line
Penguin.prototype.fly = function() {
return “Alas, this is a flightless bird.”;
};
// Only change code above this line
let penguin = new Penguin();
console.log(penguin.fly());
let bird = {
name: “Donald”,
numLegs: 2
};
let boat = {
name: “Warrior”,
type: “race-boat”
};
// Only change code below this line
let glideMixin = function(obj) {
obj.glide = function(){
console.log(“Gliding!”);
};
};
glideMixin(bird);
glideMixin(boat);
bird.glide();
boat.glide();
Gliding!
Gliding!
function Bird() {
let weight = 15;
this.getWeight = function() {
return weight;
};
}
let ducky = new Bird();
ducky.getWeight();
console.log(ducky.getWeight());
得到結果如下
15
改寫成沒有命名的function模式
// function makeNest() {
// console.log(“A cozy nest is ready”);
// }
// makeNest();
(function() {
console.log(“A cozy nest is ready”);
})();
let isCuteMixin = function(obj) {
obj.isCute = function() {
return true;
};
};
let singMixin = function(obj) {
obj.sing = function() {
console.log(“Singing to an awesome tune”);
};
};
let funModule = (function() {
return {
isCuteMixin: function(obj) {
obj.isCute = function() {
return true;
};
},
singMixin: function(obj) {
obj.sing = function() {
console.log(“Singing to an awesome tune”);
};
}
};
})();
ES6 方法
let funModule = ( () => {
return {
isCuteMixin: (obj) => {
obj.isCute = () => { true; };
},
singMixin: (obj) => {
obj.sing = () => { console.log(“Singing to an awesome tune”); }
}
}
})();
留言