Javascript学習ノート2
19709 ワード
before we get started、let’s review the way we Create a Class:始まる前に、まずClassの建立方式を復習します.
Prottype to Rescue–実際にはmethod into Classを注入していますが、Class以外のfunctionに対しても同様のことができるように注意してください.でも原理は違います.
たとえば:
実質的にはinheitance inhersitance lets See and use properties and methods from another class.To say that Penguin inhers from Animal,we need to set Penguin’s prototype to Animal.
これはPublicとPrivate変数/methodに関する声明で、使用、および訪問のテーマです.
PublicとPrivate変数/methodの声明を先に見てください.publicはthisから始まります.Privateはvarから始まります.
public methodを使ってAccess prvate variableに来ます.
その前に、戻ってきたのがmethodなら、後はvarのmethodを入れて、varのこのmethodを使ってaccess that prvate variableに来ます.e.g:
everry JavaScript object has some bagge assciated with it?Part of this bagge was the hasOwn Property method available to all object.Now let’s see where this came from…
If we have just a playing oject(i.e.not created from a clast construct)、recal that it atomatic inhers from Object.prototype.Could this be where wergt hasOwProperfrom?How can we check
このシーンはレジのcash Registerのobjectです.Object内のmethodの声明と使用に注意してください.完了したら注意してください. StaffMember-従業員、下には別の割引権限があります. appyStaffice Disccountというmethodは、cash RegisterというobjectがStaffMemberというclassの下のobjectにアクセスするプロモーションの例である.
function Person(name,age) {
this.name = name;
this.age = age;
}
// Let's make bob again, using our constructor
var bob = new Person("Bob Smith", 30);
1.method into Classを注入するProttype to Rescue–実際にはmethod into Classを注入していますが、Class以外のfunctionに対しても同様のことができるように注意してください.でも原理は違います.
たとえば:
function Dog (breed) {
this.breed = breed;
};
var bark = function(){ // class , object 。
console.log("Woof");
};
// here we make buddy and teach him how to bark
var buddy = new Dog("golden Retriever");
//Dog.prototype.bark = function() {
// console.log("Woof");
//};
//buddy.bark();
// here we make snoopy
var snoopy = new Dog("Beagle");
/// this time it works!
//snoopy.bark();
bark();
実はclassに注入したmethodはこうです.「class Name.prototype.methodName=function(){}」function Dog (breed) {
this.breed = breed;
};
//var bark = function(){
// console.log("Woof");
//};
// here we make buddy and teach him how to bark
var buddy = new Dog("golden Retriever");
//teach Dog how to bark:
Dog.prototype.bark = function() {
console.log("Woof");
};
buddy.bark(); //bark
// here we make snoopy Obj
var snoopy = new Dog("Beagle");
/// this time it works!
snoopy.bark();
//bark();
2.すべての流れを復習して、中のコメントに注意して、【間違い】と表記しています.// create your Animal class here
function Animal(name, numLegs){ //no "="
this.name = name; //notice "this"
this.numLegs = numLegs;
};
// create the sayName method for Animal
Animal.prototype.sayName = function(){
console.log("Hi my name is "+ this.name ); //notice "+"
};
// provided code to test above constructor and method
var penguin = new Animal("Captain Cook", 2);
penguin.sayName();
3.アニマル下のPenguinsにclassを立てて専属のmethodを分配します.実質的にはinheitance inhersitance lets See and use properties and methods from another class.To say that Penguin inhers from Animal,we need to set Penguin’s prototype to Animal.
// the original Animal class and sayName method
function Animal(name, numLegs) {
this.name = name;
this.numLegs = numLegs;
}
Animal.prototype.sayName = function() {
console.log("Hi my name is " + this.name);
};
// define a Penguin class
function Penguin(name){
this.name = name;//constructor only take "name"
this.numLegs = 2;//cuz all penguins have 2 legs
}
//define a Emperor class
function Emperor(name){
this.name = name;
}
// set its prototype to be a new instance of Animal
Penguin.prototype = new Animal();
Emperor.prototype = new Penguin();
var myPenguin = new Penguin("Sallivan");
myPenguin.sayName();
console.log(myPenguin["name"] + " has " + myPenguin.numLegs +" legs");
var myEmperor = new Emperor("Bee");
console.log(myEmperor["name"] + " has " + myEmperor.numLegs +" legs");
4.Public variables and Private variables/methodsこれはPublicとPrivate変数/methodに関する声明で、使用、および訪問のテーマです.
PublicとPrivate変数/methodの声明を先に見てください.publicはthisから始まります.Privateはvarから始まります.
public methodを使ってAccess prvate variableに来ます.
function Person(first,last,age) {
this.firstname = first;
this.lastname = last;
this.age = age;
var bankBalance = 7500;
//ok, let's define a public method
this.getBalance = function(){
return bankBalance;
}
}
var john = new Person('John','Smith',30);
console.log(john.bankBalance);
// create a new variable myBalance that calls getBalance()
var myBalance = john.getBalance();
console.log(myBalance);
5.「パスワード検証」の古典例その前に、戻ってきたのがmethodなら、後はvarのmethodを入れて、varのこのmethodを使ってaccess that prvate variableに来ます.e.g:
function Person(first,last,age) {
this.firstname = first;
this.lastname = last;
this.age = age;
var bankBalance = 7500;
var returnBalance = function() {
return bankBalance;
};
// create the new public function here
this.askTeller = function(){
return returnBalance;//omg! ?
};
}
var john = new Person('John','Smith',30);
console.log(john.returnBalance);//here will cause undefined error
var myBalanceMethod = john.askTeller(); //!!!this line is so important!!!!
var myBalance = myBalanceMethod();
console.log(myBalance);
6.パスワードの検証function Person(first, last, age){
this.first = first;
this.last = last;
this.age = age;
var bankBalance = 7500;
this.askTeller = function(password){
if (password == 1234) return bankBalance;
else return "wrong password";
}
}
//create an object john
var john = new Person("John","Smith",28);
var myBalance = john.askTeller(1234);
console.log(myBalance);
7.prototypeTypeについてeverry JavaScript object has some bagge assciated with it?Part of this bagge was the hasOwn Property method available to all object.Now let’s see where this came from…
If we have just a playing oject(i.e.not created from a clast construct)、recal that it atomatic inhers from Object.prototype.Could this be where wergt hasOwProperfrom?How can we check
// what is this "Object.prototype" anyway...?
var prototypeType = typeof Object.prototype;
console.log(prototypeType);
// now let's examine it!, "hasOwnProperty" is a method!
var hasOwn = Object.prototype.hasOwnProperty('hasOwnProperty');
console.log(hasOwn);
/*Can I use this onto class Person? function Person(name , age){ this.name = name; this.age = age; } var john = new Person("John", 28); var john_hasOwn = john.name('name'); console.log(john_hasOwn); */
8.引き続きobjectとmethodを使って仕事を完成するこのシーンはレジのcash Registerのobjectです.Object内のmethodの声明と使用に注意してください.完了したら注意してください.
var cashRegister = {
total:0,
add: function(itemCost){
this.total += itemCost;
},
scan: function(item,quantity) {
switch (item) {
case "eggs": this.add(0.98*quantity); break;
case "milk": this.add(1.23*quantity); break;
case "magazine": this.add(4.99*quantity); break;
case "chocolate": this.add(0.45*quantity); break;
}
},//notice this , (comma) for "scan"
};
// scan each item 4 times
cashRegister.scan("eggs",4);
cashRegister.scan("milk",4);
cashRegister.scan("magazine",4);
cashRegister.scan("chocolate",4);
//Show the total bill
console.log('Your bill is '+cashRegister.total);
9.異なるclassの下のobjectを深く理解してお互いにpropertiesを訪問するfunction StaffMember(name,discountPercent){
this.name = name;
this.discountPercent = discountPercent;
}
var sally = new StaffMember("Sally",5);
var bob = new StaffMember("Bob",10);
// Create yourself again as 'me' with a staff discount of 20%
var me = new StaffMember("me",20);
var cashRegister = {
total:0,
lastTransactionAmount: 0,
add: function(itemCost){
this.total += (itemCost || 0);
this.lastTransactionAmount = itemCost;
},
scan: function(item,quantity){
switch (item){
case "eggs": this.add(0.98 * quantity); break;
case "milk": this.add(1.23 * quantity); break;
case "magazine": this.add(4.99 * quantity); break;
case "chocolate": this.add(0.45 * quantity); break;
}
return true;
},
voidLastTransaction : function(){
this.total -= this.lastTransactionAmount;
this.lastTransactionAmount = 0;
},
// Create a new method applyStaffDiscount here
applyStaffDiscount:function(employee){
this.total -= this.total*employee.discountPercent/100;
},
};
cashRegister.scan('eggs',1);
cashRegister.scan('milk',1);
cashRegister.scan('magazine',3);
// Apply your staff discount by passing the 'me' object
// to applyStaffDiscount
cashRegister.applyStaffDiscount(me);
// Show the total bill
console.log('Your bill is '+cashRegister.total.toFixed(2));
10.