目前共有7篇帖子。
[示例]JavaScript面向对象(面向对象)
1樓 巨大八爪鱼 2015-7-17 22:02
HTML页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object-Oriented JavaScript</title>
<script src="Person.js"></script>
<script src="Student.js"></script>
<script>
function main() {
    Person.showCount();
    var person1 = new Person("Alice", "Green");
    person1.age = 45;
    person1.sayHello();
    person1.walk();
    Person.showCount();
   
    var person2 = new Person("Bob", "Green");
    person2.age = 32;
    person2.sayHello();
    person2.walk();
    Person.showCount();
   
    var student1 = new Student("Janet", "Green", "Applied Physics");
    student1.age = 17;
    student1.sayHello();
    student1.walk();
    student1.sayGoodBye();
    Person.showCount();
}
</script>
</head>

<body onload="main()">
</body>
</html>
2樓 巨大八爪鱼 2015-7-17 22:02
Person.js:
/* Constructor */
/* 构造函数 */
function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    Person.count++;
}

/* Properties */
/* 属性 */
Person.prototype.firstName = "";
Person.prototype.lastName = "";
Person.prototype.age = 0;

/* Methods */
/* 方法 */
Person.prototype.getFullName = function() {
    var fullName = this.firstName;
    if (this.lastName != "") {
        fullName += " " + this.lastName;
    }
    return fullName;
}

Person.prototype.sayHello = function() {
    var ageStr = this.age + " year";
    if (this.age > 1) {
        ageStr += "s";
    }
    console.log("Hello, I'm " + this.getFullName() + ".\nI'm " + ageStr + " old now.");
}

Person.prototype.walk = function() {
    console.log(this.getFullName() + " is walking!");
}

/* Static Properties */
/* 静态属性 */
Person.count = 0;

/* Static Methods */
/* 静态方法 */
Person.showCount = function() {
    if (this.count == 1) {
        console.log("There is 1 person.");
    } else if (this.count == 0) {
        console.log("There are no people.");
    } else {
        console.log("There are " + this.count + " people now.");
    }
}
3樓 巨大八爪鱼 2015-7-17 22:02
Student.js:
function Student(firstName, lastName, subject) {
    Person.call(this, firstName, lastName); // call the parent constructor
    this.subject = subject;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

/* Properties */
Student.prototype.subject = "";

/* Methods */
Student.prototype.sayHello = function() {
    Person.prototype.sayHello.call(this); // call the parent sayHello()
    console.log("I'm studying " + this.subject + ".");
}

Student.prototype.sayGoodBye = function() {
    console.log("Goodbye!");
}
4樓 巨大八爪鱼 2015-7-17 22:08
类的结构相当于:
<?php
abstract class Person {
    public static $count;
    public $firstName;
    public $lastName;
    public $age;
   
    abstract public static function showCount();
    abstract public function getFullName();
    abstract public function sayHello();
    abstract public function walk();
}

abstract class Student extends Person {
    public $subject;
    public function sayHello() { // Override
    }
    abstract public function sayGoodBye();
}
?>
(以上所有的abstract都是我加上的,否则这个PHP文件就是错误的)
5樓 巨大八爪鱼 2015-7-17 22:10
输出内容:
There are no people.
Person.js (line 47)

Hello, I'm Alice Green.
I'm 45 years old now.

Person.js (line 30)
Alice Green is walking!
Person.js (line 34)
There is 1 person.
Person.js (line 45)

Hello, I'm Bob Green.
I'm 32 years old now.

Person.js (line 30)
Bob Green is walking!
Person.js (line 34)
There are 2 people now.
Person.js (line 49)

Hello, I'm Janet Green.
I'm 17 years old now.

Person.js (line 30)
I'm studying Applied Physics.
Student.js (line 15)
Janet Green is walking!
Person.js (line 34)
Goodbye!
Student.js (line 19)
There are 3 people now.
Person.js (line 49)

6樓 巨大八爪鱼 2015-7-17 22:13
本文参考资料:
Introduction to Object-Oriented JavaScript - JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

oop - How do I create an abstract base class in JavaScript? - Stack Overflow
http://stackoverflow.com/questions/597769/how-do-i-create-an-abstract-base-class-in-javascript

Extending JavaScript Objects and Classes
http://phrogz.net/JS/classes/ExtendingJavaScriptObjectsAndClasses.html

Inheritance and the prototype chain - JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

function - Javascript object extending - - Stack Overflow
http://stackoverflow.com/questions/10430279/javascript-object-extending

JavaScript 2 and the Future of the Web
https://developer.mozilla.org/presentations/xtech2006/javascript/
7樓 巨大八爪鱼 2015-7-17 22:17
Private Members in JavaScript
http://javascript.crockford.com/private.html

回復帖子

內容:
用戶名: 您目前是匿名發表
驗證碼:
 
 
©2010-2024 Arslanbar [手機版] [桌面版]
除非另有聲明,本站採用創用CC姓名標示-相同方式分享 3.0 Unported許可協議進行許可。