JavaScript OOP Pattern
•
10 likes•948 views
The document discusses object-oriented programming concepts in JavaScript including object creation, prototypes, inheritance and the this keyword. It shows examples of creating Name constructor functions and Name objects, setting and getting name properties, using prototypes to share methods between objects, and checking object types and relationships like instanceof.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to JavaScript OOP Pattern
Similar to JavaScript OOP Pattern (20)
More from 지수 윤
More from 지수 윤 (19)
Recently uploaded
Recently uploaded (20)
JavaScript OOP Pattern
- 2. !
- 3. !
- 6. !
- 9. ! var oName = {name : “javascript”, getName : function() {return this.name}};! var oName2 = {name : “c#”, getName : function() {return this.name}};! var oName3 = {name : “original”, getName : function() {return this.name}};! !
- 10. ! var oName = {name : “javascript”, getName : function() {return this.name}};! var oName2 = {name : “c#”, getName : function() {return this.name}};! var oName3 = {name : “original”, getName : function() {return this.name}};! !
- 11. function Name(name) {! this.name = name; this.getName = function() {! return this.name;! }; this.setName = function(newName) {! this.name = newName;! };! }! ! ! var obj = new Name("javascript");! obj.getName();! ! var obj = new Name(“C#”);! obj.getName();
- 12. function Name(name) {! this.name = name; this.getName = function() {! return this.name;! }; this.setName = function(newName) {! this.name = newName;! };! }! ! ! var obj = new Name("javascript");! obj.getName();! ! var obj2 = new Name(“C#”);! obj2.getName();! ! obj.getName === obj2.getName; //false
- 13. function Name(name) {! this.name = name;! }! ! Name.prototype.getName = function() {! return this.name;! }; Name.prototype.setName = function(newName) {! this.name = newName;! };! ! ! ! var obj = new Name("javascript");! obj.getName();! ! var obj2 = new Name(“C#”);! obj2.getName();!
- 14. function Name(name) {! this.name = name;! }! ! Name.prototype.getName = function() {! return this.name;! }; Name.prototype.setName = function(newName) {! this.name = newName;! };! ! ! ! var obj = new Name("javascript");! obj.getName();! ! var obj2 = new Name(“C#”);! obj2.getName();! obj.getName === obj2.getName; //true
- 15. function Name(name) {! this.name = name;! }! ! Name.prototype.getName = function() {! return this.name;! }; Name.prototype.setName = function(newName) {! this.name = newName;! };! ! ! ! var obj = new Name("javascript");! debugger;! obj.getName();! ! var obj2 = new Name("C#");! obj2.getName();!
- 16. function Name(name) {! this.name = name;! }! ! Name.prototype.getName = function() {! return this.name;! }; Name.prototype.setName = function(newName) {! this.name = newName;! };! ! ! ! var obj = new Name("javascript");! debugger;! obj.getName();! ! var obj2 = new Name("C#");! obj2.getName();!
- 17. function Name(name) {! this.name = name;! }! ! Name.prototype.getName = function() {! return this.name;! }; Name.prototype.setName = function(newName) {! this.name = newName;! };! ! ! ! var obj = new Name("javascript");! debugger;! obj.getName();! ! var obj2 = new Name("C#");! obj2.getName();! obj.__proto__
- 18. function Name(name) {! this.name = name;! }! ! Name.prototype.getName = function() {! return this.name;! }; Name.prototype.setName = function(newName) {! this.name = newName;! };! ! ! ! var obj = new Name("javascript");! debugger;! obj.getName();! ! var obj2 = new Name("C#");! obj2.getName();! obj.__proto__ == Name.prototype ?
- 19. function Name(name) {! this.name = name;! }! ! Name.prototype.getName = function() {! return this.name;! }; Name.prototype.setName = function(newName) {! this.name = newName;! };! ! ! ! var obj = new Name("javascript");! debugger;! obj.getName();! ! var obj2 = new Name("C#");! obj2.getName();! obj.constructor === Name //true
- 20. function Name(name) {! this.name = name;! }! ! Name.prototype.getName = function() {! return this.name;! }; Name.prototype.setName = function(newName) {! this.name = newName;! };! ! ! ! var obj = new Name("javascript");! debugger;! obj.getName();! ! var obj2 = new Name("C#");! obj2.getName();! obj instanceof Name //true
- 21. function Name(name) {! this.name = name;! }! ! Name.prototype.getName = function() {! return this.name;! }; Name.prototype.setName = function(newName) {! this.name = newName;! };! ! ! ! var obj = new Name("javascript");! debugger;! obj.getName();! ! var obj2 = new Name("C#");! obj2.getName();! obj instanceof Name //true ! obj instanceof Object //true. // 상속받은 생성자도 true로 나옴
- 22. var nameModel = {};! ! ! var nameController = {! getName : function() {! return this.name;! },! setName : function(newName) {! this.name = newName;! }! }! ! ! nameController.setName.call(nameModel,"javascript");! nameController.getName.call(nameModel);!
- 23. var nameModel = {};! ! var nameController = {! getName : function() {! return this.name;! },! setName : function(newName) {! this.name = newName;! }! }! ! nameController.setName.call(nameModel,"javascript");! nameController.getName.call(nameModel);! ! var nameModel2 = {};! nameController.setName.call(nameModel2, "java");! nameController.getName.call(nameModel2);
- 25. !