JavaScript object-oriented tutorial
Javascript is a C-like language. Its object-oriented features are strange compared to C++/Java, but it is indeed quite powerful. In the past two days, a former colleague has been asking me about object-oriented programming in Javascript, so I would like to write an article for him to read. This article mainly wants to explain object-oriented programming in Javascript from an overall perspective. Reposted from an article by Cool Shell, it is very well written...
In addition, this article is mainly based on ECMAScript 5 and aims to introduce new technologies. Regarding compatibility, please see the last section.
Preliminary exploration
We know that the definition of variables in Javascript is basically as follows:
var name = 'Chen Hao';;
var email = 'haoel(@)hotmail.com';
var website = 'http:/ /coolshell.cn';
If you want to write it in objects, it will look like this:
var chenhao = {
name :'Chen Hao',
email : 'haoel(@)hotmail.com',
website: 'http://coolshell.cn'
}
So, I can access like this:
//As a member
chenhao.name;
chenhao.email;
chenhao. website;
//In the form of hash map
chenhao["name"];
chenhao["email"];
chenhao["website"];
About functions, we know that Javascript functions are like this of:
var doSomething = function(){
alert('Hello World.');
};
So, we can do this:
var sayHello = function(){
var hello = " Hello, I'm “+ this.name
+ “, my email is: ” + this.email
+ “, my website is: ” + this.website;
alert(hello);
};
//Direct assignment, this is very similar to the function pointer of C/C++
chenhao.Hello = sayHello;
chenhao.Hello();
I believe these things are relatively simple and everyone understands it. You can see that JavaScript object functions are directly declared, assigned values, and used directly. Dynamic language for runtime.
There is also a more standardized way of writing:
//We can see that it uses function as a class.
var Person = function(name, email, website){
this.name = name;
this.email = email;
this.website = website;
this.sayHello = function(){
var hello = "Hello, I'm "+ this.name + ", n" +
"my email is: " + this.email + ", n" +
"my website is: " + this.website ;
alert(hello);
};
};
var chenhao = new Person("Chen Hao", "haoel@hotmail.com",
"http://coolshell.cn");
chenhao.sayHello();
By the way, to delete the attributes of an object, it is very simple:
delete chenhao['email']
From the above examples, we can see the following points:
◆ Javascript's data and member encapsulation is very simple. No class is entirely an object operation. Purely dynamic!
◆ The this pointer in Javascript function is critical. If not, it is a local variable or local function.
◆ Javascript object member functions can be temporarily declared when used, and a global function can be directly assigned to it.
◆ Javascript member functions can be modified on the instance, which means that the behavior of the same function name in different instances may not be the same.
Property configuration – Object.defineProperty
Look at the following code first:
//Create an object
var chenhao = Object.create(null);
//Set a property
Object.defineProperty( chenhao,
'name', { value: 'Chen Hao',
writable: true,
configurable: true,
enumerable: true });
//Set multiple properties
Object.defineProperties(chenhao,
{
'email' : { value: 'haoel@hotmail.com',
writable: true,
configurable: true,
enumerable: true },
'website': { value: 'http: //coolshell.cn',
writable: true,
configurable: true,
enumerable: true }
}
);
Let’s talk about what these attribute configurations mean.
writable: Whether the value of this attribute can be changed.
configurable: Whether the configuration of this attribute can be changed.
enumerable: Whether this property can be traversed in a for...in loop or enumerated in Object.keys.
value: attribute value.
get()/set(_value): get and set accessors.
Get/Set accessor
About the get/set accessor, it means to use get/set to replace value (it cannot be used with value). The example is as follows:
var age = 0;
Object. defineProperty( chenhao,
'age', {
get: function() {return age+1;},
set: function(value) {age = value;}
enumerable : true,
configurable : true
}
);
chenhao.age = 100; //Call set
alert(chenhao.age); //Call get and output 101 (+1 in get);
Let’s look at another update As a practical example - use the existing attribute (age) to construct a new attribute (birth_year) through get and set:
Object.defineProperty(chenhao,
'birth_year',
{
get: function() {
var d = new Date();
var y = d.getFullYear();
return ( y – this.age );
},
set: function(year) {
var d = new Date();
var y = d.getFullYear();
this.age = y – year;
}
}
);
alert(chenhao.birth_year);
chenhao.birth_year = 2000;
alert(chenhao.age);
It seems a bit troublesome to do this. You said, why don’t I write it like this:
var chenhao = {
name: "Chen Hao",
email: "haoel@hotmail.com",
website: "http://coolshell.cn",
age: 100,
get birth_year() {
var d = new Date();
var y = d.getFullYear();
return ( y – this.age );
},
set birth_year(year) {
var d = new Date( );
var y = d.getFullYear();
this.age = y – year;
}
};
alert(chenhao.birth_year);
chenhao.birth_year = 2000;
alert (chenhao.age);
Yes, you can indeed do this, but through defineProperty() you can do these things:
1) Set property configurations such as writable, configurable, enumerable, etc.
2) Dynamically add attributes to an object. For example: some HTML DOM objects.
View the object property configuration
If you view and manage these configurations of the object, there is a program below that can output the properties and configuration of the object:
// List the properties of the object.
function listProperties(obj)
{
var newLine = ”
“;
var names = Object.getOwnPropertyNames(obj);
for (var i = 0; i < names.length; i++) {
var prop = names[i] ;
document.write(prop + newLine);
// List the object’s property configuration (descriptor) using the getOwnPropertyDescriptor function.
var descriptor = Object.getOwnPropertyDescriptor(obj, prop);
for (var attr in descriptor) {
document.write(“…” + attr + ': ' + descriptor[attr]);
document. write(newLine);
}
document.write(newLine);
}
}
listProperties(chenhao);
call, apply, bind and this
About the this pointer of Javascript, and C++/ Java is very similar. Let's take a look at an example: (This example is very simple, I won't say more)
function print(text){
document.write(this.value + ' – ' + text+ '
');
}
var a = {value: 10, print : print};
var b = {value: 20, print : print};
print('hello');// this => global, output " undefined – hello”
a.print('a');// this => a, output “10 – a”
b.print('b'); // this => b, output “ 20 – b”
a['print']('a'); // this => a, output “10 – a”
Let’s look at call and apply again. The difference between these two functions is the parameters The appearance is different, and the other is that the performance is different. The performance of apply is much worse. (For performance, you can go to JSPerf and take a look)
print.call(a, 'a'); // this => a, output “10 – a”
print.call(b, 'b '); // this => b, output “20 – b”
print.apply(a, ['a’]); // this => a, output “10 – a”
print. apply(b, ['b']); // this => b, output "20 – b"
But after bind, the this pointer may be different, but because Javascript is dynamic. As in the following example
var p = print.bind(a);
p('a'); // this => a, output “10 – a”
p.call(b, 'b' ); // this => a, output “10 – b”
p.apply(b, ['b’]); // this => a, output “10 – b”
Inheritance and Replication
Through the above examples, we can actually inherit through Object.create(). Please see the code below. Student inherits from Object.
var Person = Object.create(null);
Object.defineProperties
(
Person,
{
'name' : { value: 'Chen Hao'},
'email' : { value : 'haoel@hotmail .com'},
'website': { value: 'http://coolshell.cn'}
}
);
Person.sayHello = function () {
var hello = “
Hello, I am “+ this.name + “,
” +
“my email is: ” + this.email + “,
” +
“my website is: ” + this.website;
document. write(hello + “
”);
}
var Student = Object.create(Person);
Student.no = “1234567″; //Student number
Student.dept = “Computer Science”; / /Department
//Using the attributes of Person
document.write(Student.name + ' ' + Student.email + ' ' + Student.website +'
');
//Methods of using Person
Student.sayHello();
//Overload the SayHello method
Student.sayHello = function (person) {
var hello = “
Hello, I am “+ this.name + “,
” +
“my email is: ” + this.email + “,
” +
“my website is: ” + this.website + “,
” +
“my student no is: ” + this. no + “, < ;br>” +
“my departent is: ” + this. dept;
document.write(hello + '
');
}
//Call again
Student.sayHello();
// View the properties of Student (only no, dept and overloaded sayHello)
document.write('
' + Object.keys(Student) + '
');
Common to the above example, We can see that the attributes in Person are not actually copied to Student, but we can access them. This is because Javascript implements this mechanism using delegates. In fact, this is the prototype, and Person is the prototype of Student.
When our code needs an attribute, the Javascript engine will first check whether the current object has this attribute. If not, it will search whether its Prototype object has this attribute, and continue until it is found. Or until there are no Prototype objects.
To prove this, we can use Object.getPrototypeOf() to check:
Student.name = 'aaa';
//Output aaa
document.write('
' + Student.name + '
');//Output Chen Hao
document.write('
' +Object.getPrototypeOf(Student).name + '
');So, you You can also call the function of the parent object in the function of the child object, just like Base::func() in C++. Therefore, when we overload the hello method, we can use the code of the parent class, as shown below:
//New version of the overloaded SayHello method
Student.sayHello = function (person) {
Object.getPrototypeOf(this).sayHello .call(this);
var hello = “my student no is: ” + this. no + “,
” +
“my departent is: ” + this. dept;
document.write(hello + '
');
}
This is very powerful.
Combination
The above thing does not meet our requirements. We may hope that these objects can be truly combined. Why combination? Because we all know that this is the most important thing in OO design. However, this does not support Javascript particularly well, so we can still get it done.
First, we need to define a Composition function: (target is the object that acts on it, source is the source object). The following code is very simple. It just takes out the attributes in the source one by one and defines them in the target. On Fulling composition (target, source) {
var desc = object.get.getownpropertydescriptor; opt = object.defineProperty;
Prop (Source). Foreach (
function(key) {
def_prop(target, key, desc(source, key))
}
)
return target;
}
With this function, we can play here:
//Artist
var Artist = Object.create(null);Artist.sing = function() {
return this.name + ' starts singing…';}
Artist.paint = function() {return this.name + ' starts painting…';
}
//Athletes
var Sporter = Object.create(null);
Sporter.run = function() {
return this.name + ' starts running…';
}
Sporter.swim = function() {
return this.name + ' starts swimming…';
Composition(Person, Artist);
document.write(Person.sing() + '
' );
document.write(Person.paint() + '
');
Composition(Person, Sporter);
document.write(Person.run() + '
');
document.write(Person.swim() + '
');
//See what's in Person? (Output: sayHello,sing,paint,swim,run)
document.write('
' + Object.keys(Person) + '
');
Let’s do it first Let’s talk about Prototype. Let's take a look at the following routine first. This routine does not need explanation. It is very similar to the function pointer in C language. There are many such things in C language.
document.write( x + ' + ' + y + ' = ' + (x+y) + '
');
return x + y;
document.write(x + ' – ' + y + ' = ' + (x-y) + '
');
};
var operations = {
'+': plus,
};
var calculate = function(x, y, operation){
return operations[operation](x, y);
calculate(12, 4, '+');
calculate(24, 3, '-');
var Cal = function(x, y){
this.y = y;
}
Cal.prototype.operations = {
'+': function(x, y) { return x+y;},
'-': function(x, y) { return x-y;}
};
Cal.prototype.calculate = function(operation){
return this.operations[operation](this.x, this.y);
};
var c = new Cal(4, 5);
c.calculate('+');
c.calculate('-');
This is the usage of prototype. Prototype is the most important content in the JavaScript language. There are too many articles on the Internet about this thing. To put it bluntly, prototype is to extend an object, and its characteristic is to return a new instance by "copying" an existing instance instead of creating a new instance. The copied instance is what we call a "prototype", and this prototype is customizable (of course, there is no real copy here, it is actually just a delegation). In the above example, we extended the instance Cal to have an operations attribute and a calculate method.
In this way, we can implement inheritance through this feature. Remember our first Person, the following example is to create a Student to inherit Person.
function Person(name, email, website){
this.name = name;
this.email = email;
this.website = website;
};
Person.prototype.sayHello = function(){
var hello = “Hello, I am “+ this.name + “,
” +
“my email is: ” + this.email + “,
” +
“my website is: ” + this .website;
return hello;
};
function Student(name, email, website, no, dept){
var proto = Object.getPrototypeOf;
proto(Student.prototype).constructor.call(this, name, email, website);
this.no = no;
this.dept = dept;
}
//Inherit prototype
Student.prototype = Object.create(Person.prototype);
//Reset constructor
Student.prototype.constructor = Student;
//Overload sayHello()
Student.prototype.sayHello = function(){
var proto = Object.getPrototypeOf;
var hello = proto(Student.prototype).sayHello.call (this) + '
';
hello += “my student no is: ” + this. no + “,
” +
“my departent is: ” + this. dept;
return hello ;
};
var me = new Student(
"gtfx",
"gtfx0209@gmail.com",
"http://dyygtfx.com",
"12345678″,
"Computer Science"
);
document.write(me.sayHello());
Compatibility
The above codes may not be able to run in all browsers, because the above codes follow the specifications of ECMAScript 5. About ECMAScript 5 For the browser compatibility list, you can see the "ES5 Browser Compatibility List" here.
All the code in this article has been tested in the latest version of Chrome.
The following are some functions that can be used in browsers that are not ES5 compatible:
Object.create() function
function clone(proto) {
function Dummy() { }
Dummy.prototype = proto;
Dummy.prototype.constructor = Dummy;
return new Dummy(); //Equivalent to Object.create(Person);
}
var me = clone(Person);
defineProperty() function
function defineProperty(target, key, descriptor) {
if (descriptor.value){
target[key] = descriptor.value;
}else {
descriptor.get && target.__defineGetter__(key, descriptor. get);
descriptor.set && target.__defineSetter__(key, descriptor.set);
}
return target
}
keys() function
function keys(object) { var result, key
result = [];
for (key in object){
if (object.hasOwnProperty(key)) result.push(key)
}
return result;
}
Object.getPrototypeOf() function
function proto(object) {
return !object? null
: '__proto__' in object? object.__proto__
: /* not exposed? */ object.constructor.prototype
}
bind function
var slice = [].slice
function bind(fn, bound_this) { var bound_args
bound_args = slice.call(arguments, 2)
return function() { var args
args = bound_args.concat(slice .call(arguments))
return fn.apply(bound_this, args) }
}
The above is the content of the JavaScript object-oriented tutorial. For more related content, please pay attention to the PHP Chinese website (www.php.cn )!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

Go language supports object-oriented programming through type definition and method association. It does not support traditional inheritance, but is implemented through composition. Interfaces provide consistency between types and allow abstract methods to be defined. Practical cases show how to use OOP to manage customer information, including creating, obtaining, updating and deleting customer operations.

OOP best practices in PHP include naming conventions, interfaces and abstract classes, inheritance and polymorphism, and dependency injection. Practical cases include: using warehouse mode to manage data and using strategy mode to implement sorting.

The Go language supports object-oriented programming, defining objects through structs, defining methods using pointer receivers, and implementing polymorphism through interfaces. The object-oriented features provide code reuse, maintainability and encapsulation in the Go language, but there are also limitations such as the lack of traditional concepts of classes and inheritance and method signature casts.

There is no concept of a class in the traditional sense in Golang (Go language), but it provides a data type called a structure, through which object-oriented features similar to classes can be achieved. In this article, we'll explain how to use structures to implement object-oriented features and provide concrete code examples. Definition and use of structures First, let's take a look at the definition and use of structures. In Golang, structures can be defined through the type keyword and then used where needed. Structures can contain attributes

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

By mastering tracking object status, setting breakpoints, tracking exceptions and utilizing the xdebug extension, you can effectively debug PHP object-oriented programming code. 1. Track object status: Use var_dump() and print_r() to view object attributes and method values. 2. Set a breakpoint: Set a breakpoint in the development environment, and the debugger will pause when execution reaches the breakpoint, making it easier to check the object status. 3. Trace exceptions: Use try-catch blocks and getTraceAsString() to get the stack trace and message when the exception occurs. 4. Use the debugger: The xdebug_var_dump() function can inspect the contents of variables during code execution.

JavaScript and WebSocket: Building an efficient real-time search engine Introduction: With the development of the Internet, users have higher and higher requirements for real-time search engines. When searching with traditional search engines, users need to click the search button to get results. This method cannot meet users' needs for real-time search results. Therefore, using JavaScript and WebSocket technology to implement real-time search engines has become a hot topic. This article will introduce in detail the use of JavaScript
