Last active
December 14, 2015 11:49
-
-
Save bobozhengsir/5082018 to your computer and use it in GitHub Desktop.
JavaScript techniques for Creating Object/ JavaScript 创建对象方法
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /******************************************* | |
| * 参考http://howtonode.org/object-graphs-2 | |
| * *****************************************/ | |
| /** | |
| * 方法一：典型构造器方法 | |
| */ | |
| function Rectangle(width, height) { | |
| this.width = width; | |
| this.height = height; | |
| } | |
| Rectangle.prototype.getArea = function getArea() { | |
| return this.width * this.height; | |
| }; | |
| Rectangle.prototype.getPerimeter = function getPerimeter() { | |
| return 2 * (this.width + this.height); | |
| } | |
| Rectangle.prototype.toString = function toString() { | |
| return this.constructor.name + " a=" + this.getArea() + " p=" + this.getPerimter(); | |
| }; | |
| // Create Square inherit from Rectangle by Constructor | |
| function Square(side) { | |
| this.width = side; | |
| this.heigth = side; | |
| } | |
| // make Square inherit from Rectangle | |
| Square.prototype = Object.create(Rectangle.prototype, { constructor: { value: Square } )); | |
| // Override a method | |
| Square.prototype.getPerimeter = function getPerimeter() { | |
| return this.width * 4; | |
| } | |
| /** | |
| * test | |
| * Output: Rectangle a=24 p=20 Square a=25 p=20 | |
| */ | |
| var rect = new Rectangle(6, 4); | |
| var sqr = new Square(5); | |
| console.log(rect.toString()); | |
| console.log(sqr.toString()); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 方法三：工厂模式法 | |
| */ | |
| // a super simple MVC system | |
| function Controller(model, view) { | |
| view.update(model.value); | |
| return { | |
| up: function onUp(evt) { | |
| model.value++; | |
| view.update(model.value); | |
| }, | |
| down: function onDown(evt) { | |
| model.value--; | |
| view.update(model.value); | |
| }, | |
| save: function onSave(evt) { | |
| model.save(); | |
| view.close(); | |
| } | |
| }; // end return | |
| } | |
| var on = Controller( | |
| // Inline a mock model | |
| { | |
| value: 5, | |
| save: function save() { | |
| console.log("Saving value " + this.value + " somewhere"); | |
| } | |
| }, | |
| // Inline a mock view | |
| { | |
| update: function update(newValue) { | |
| console.log("View now has " + newValue); | |
| }, | |
| close: function close() { | |
| console.log("Now hiding view"); | |
| } | |
| } | |
| ); | |
| setTimeout(on.up, 100); | |
| setTimeout(on.down, 200); | |
| setTimeout(on.save, 300); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 方法四： 使用__proto__原型继承法 | |
| */ | |
| var Rectangle = { | |
| name: "Rectangle", | |
| getArea: function getArea() { | |
| return this.width * this.height; | |
| }, | |
| getPerimeter: function getPerimeter() { | |
| return 2 * (this.width + this.heigth); | |
| } | |
| toString: function toString() { | |
| return this.name + " a=" + this.getArea() + " p=" + this.getPerimeter(); | |
| } | |
| }; | |
| // Make Square inherit from Rectangle by prototype | |
| /********************************** | |
| var Square = Object.create(Rectangle); | |
| Square.name = "Square"; | |
| Square.getArea = function getArea() { | |
| return this.width * this.width; | |
| }; | |
| Square.getPerimeter = function getPerimeter() { | |
| return this.width * 4; | |
| } | |
| ************************************/ | |
| var Square = { | |
| __proto__: Rectangle, | |
| name: "Square", | |
| getArea: function getArea() { | |
| return this.width * this.width; | |
| }, | |
| getPerimeter: function getPerimeter() { | |
| return this.width * 4; | |
| } | |
| var rect = Object.create(Rectangle); | |
| rect.width = 6; | |
| rect.height = 4; | |
| var square = Object.create(Square); | |
| square.width = 5; | |
| console.log(rect.toString()); | |
| console.log(square.toString()); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 方法二： 原型继承法 | |
| */ | |
| var Rectangle = { | |
| name: "Rectangle", | |
| getArea: function getArea() { | |
| return this.width * this.height; | |
| }, | |
| getPerimeter: function getPerimeter() { | |
| return 2 * (this.width + this.heigth); | |
| } | |
| toString: function toString() { | |
| return this.name + " a=" + this.getArea() + " p=" + this.getPerimeter(); | |
| } | |
| }; | |
| // Make Square inherit from Rectangle by prototype | |
| var Square = Object.create(Rectangle); | |
| Square.name = "Square"; | |
| Square.getArea = function getArea() { | |
| return this.width * this.width; | |
| }; | |
| Square.getPerimeter = function getPerimeter() { | |
| return this.width * 4; | |
| } | |
| var rect = Object.create(Rectangle); | |
| rect.width = 6; | |
| rect.height = 4; | |
| var square = Object.create(Square); | |
| square.width = 5; | |
| console.log(rect.toString()); | |
| console.log(square.toString()); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment