Javascript上級技術編(2):対象に向けた理解を深める
28282 ワード
Javascriptは対象に向けた言語とよく言われます.つまり対象に向けた基本的な特性を持っています.例えば、オブジェクト、クラス、属性、方法、コンストラクションなどの基本的な要素が含まれています.実はとても簡単で、一つのfunctionです.いわゆる「簡単は美」です.カスタムクラスでは、JSベースのクラス:Math,Aray,ObjectおよびStringなどを振り返ってみます.
// JS ( )
function EmailMessage() {
}
var EmailMessage = function() {
}// ( )
var EmailMessage = function() {
alert("New message created.");
}
var myMessage = new EmailMessage(); // "New message created."
var anotherMessage = new EmailMessage(); // "New message created."//
var EmailMessage = function(message) {
alert(message);
}
// "Return to sender"
var myMessage = new EmailMessage("Return to sender");// this
var EmailMessage = function(subject) {
this.subject = subject;
this.send = function() {
alert("Message '" + this.subject + "' sent!");
}
}
var myMessage = new EmailMessage("Check this out...");
var anotherMessage = new EmailMessage("Have you seen this before?");
//
alert(myMessage.subject); // "Check this out..."
alert(anotherMessage.subject); // "Have you seen this before?"
myMessage.send();// "Message 'Check this out...' sent!"
anotherMessage.send();// "Message 'Have you seen this before?' sent!"var EmailMessage = function(subject) {
this.subject = subject;
}
// prototype
EmailMessage.prototype.send = function() {
alert("Message '" + this.subject + "' sent!");
}
var myMessage = new EmailMessage("Check this out...");
var anotherMessage = new EmailMessage("Have you seen this before?");
//
alert(myMessage.subject); // "Check this out..."
alert(anotherMessage.subject); // "Have you seen this before?"
myMessage.send();// "Message 'Check this out...' sent!"
anotherMessage.send();// "Message 'Have you seen this before?' sent!"var User = function() {
this.username = "";
this.password = "";
this.login = function() {
return true;
}
}
// User ， ( )
User = new User();
// ( C# )
User.login();var Inbox = new function() {
this.messageCount = 0;
this.refresh = function() {
return true;
}
}();
//
Inbox.refresh();var EmailMessage = function(subject) {
this.subject = subject;
this.send = function() {
alert("Message '" + this.subject + "' sent!");
}
}
//
var EventInvitation = function() {};
// EmailMessage
EventInvitation.prototype = new EmailMessage(); // EventInvitation
EventInvitation.prototype.constructor = EventInvitation; // subject
EventInvitation.prototype.subject = "You are cordially invited to...";
// EventInvitation
var myEventInvitation = new EventInvitation();
// "Message 'You are cordially invited to...' sent!"
myEventInvitation.send();var EmailMessage = function(subject) {
this.subject = subject;
this.send = function() {
alert("Email message sent!");
}
}
// EmailMessage
var EventInvitation = function() {};
EventInvitation.prototype = new EmailMessage("You are cordially invited to...");
EventInvitation.prototype.constructor = EventInvitation;
// send
EventInvitation.prototype.send = function() { alert("Event invitation sent!"); } var myEmailMessage = new EmailMessage("A new email coming your way.");
var myEventInvitation = new EventInvitation();
myEmailMessage.send(); // "Email message sent!"
myEventInvitation.send(); // "Event invitation sent!"var EmailMessage = function(subject) {
this.subject = subject;
this.send = function() {
alert("Email message sent!");
}
}
// EmailMessage
var EventInvitation = function() {};
EventInvitation.prototype = new EmailMessage("You are cordially invited to...");
EventInvitation.constructor.prototype = EventInvitation;
// send
EventInvitation.prototype.send = function() {
alert("Event invitation sent!");
// this.constructor.prototype
this.constructor.prototype.send.call(this); }
var myEmailMessage = new EmailMessage("A new email coming your way.");
var myEventInvitation = new EventInvitation();
myEmailMessage.send();// "Email message sent!"
myEventInvitation.send();// "Event invitation sent!"、"Email message sent!"var showSubject = function() {
alert(this.subject);
}
showSubject();// "undefined"var showSubject = function() {
alert(this.subject);
}
showSubject();// "undefined"
this.subject = "Global subject";//
showSubject();// "Global subject"
// EmailMessage
var EmailMessage = function(subject) {
this.subject = subject;
}
// showSubject EmailMessage， showSubject ()
EmailMessage.prototype.showSubject = showSubject;
var myEmailMessage = new EmailMessage("I am the subject.");
myEmailMessage.showSubject();// "I am the subject."， this myEmailMessage
showSubject();// "Global subject"， this window
EmailMessage.prototype.outputSubject = function() { // EmailMessage outputSubject showSubject
showSubject();
}
myEmailMessage.outputSubject();// "Global subject."， ， this windowvar showSubject = function() {
alert(this.subject);
}
var setSubjectAndFrom = function(subject, from) {
this.subject = subject;
this.from = from;
}
//this window
showSubject(); // "undefined"
setSubjectAndFrom("Global subject", "[email protected]");
showSubject(); // Outputs "Global subject"
// EmailMessage
var EmailMessage = function() {
this.subject = "";
this.from = "";
};
var myEmailMessage = new EmailMessage();
//call apply this window myEmailMessage
setSubjectAndFrom.call(myEmailMessage, "New subject", "[email protected]"); setSubjectAndFrom.apply(myEmailMessage, [ "New subject", "[email protected]" ]); showSubject.call(myEmailMessage);// "New subject"var EmailMessage = function(subject) {
//
this.subject = subject;
this.send = function() {
alert("Message sent!");
}
// ( var this)
var messageHeaders = "";
var addEncryption = function() {
return true;
}
// ( ， )
var messageSize = 1024;
this.getMessageSize = function() {
alert(messageSize);
}
}var myEmailMessage = new EmailMessage("Save these dates...");
alert(myEmailMessage.subject); // "Save these dates..."
myEmailMessage.send(); // "Message sent!"
// "undefined" messageHeaders
alert(myEmailMessage.messageHeaders);
// addEncryption() ，
try {
myEmailMessage.addEncryption();
} catch (e) {
alert("Method does not exist publicly!");
}
// "undefined" messageSize
alert(myEmailMessage.messageSize);
// "1024",
myEmailMessage.getMessageSize();var earth = {
name: "Terra Firma", //
planet: true, //
moons: 1, //
diameter: 12756.36, //
oceans: ["Atlantic", "Pacific", "Indian", "Arctic", "Antarctic"], //
poles: { //
north: "Arctic",
south: "Antarctic"
},
setDiameter: function(diameter) { //
this.diameter = diameter; // this earth
}
}
// ：
alert(earth.diameter); // "12756.36"
earth.setDiameter(12756.37);
alert(earth.diameter); // "12756.37"var EmailMessage = function() {};
EmailMessage.prototype = {
subject: "",
from: "",
send: function() {
alert("Message sent!");
}
}
var myEmailMessage = new EmailMessage();
myEmailMessage.subject = "Come over for a party.."
myEmailMessage.send(); // "Message sent!"//
var sendEmail = function(to, from, subject, body) {
alert("Message '" + subject + "' from '" + from + "' sent to '" + to + "'!");
}
//
sendEmail("[email protected]", "[email protected]", "Dinner this week?", ?
"Do you want to come over for dinner this week? Let me know.");
// ( 4 1 )
var sendEmail = function(message) {
alert("Message '" + message.subject + "' from '" + message.from + "' sent to '" + message.to + "'!");
}
// ，
sendEmail({
from: '[email protected]',
to: '[email protected]',
subject: 'Dinner this week?',
body: 'Do you want to come over for dinner this week? Let me know.'
});// MyCompany Singleton
var MyCompany = new function(){
this.MyClient = {
WebMail: function() {
alert("Creating WebMail application...");
}
};
}();
// "Creating WebMail application..."
var myWebMail = new MyCompany.MyClient.WebMail();