Home Web Front-end JS Tutorial JavaScript object-oriented tutorial

JavaScript object-oriented tutorial

Dec 20, 2016 pm 03:23 PM
javascript object-oriented

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) + '
');

 Prototype and inheritance


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.

var plus = function(x,y){

document.write( x + ' + ' + y + ' = ' + (x+y) + '
');
return x + y;

};

var minus = function(x,y){

document.write(x + ' – ' + y + ' = ' + (x-y) + '
');

return x – y;

};

var operations = {
'+': plus,

'-': minus

};

var calculate = function(x, y, operation){
return operations[operation](x, y);

};


calculate(12, 4, '+');
calculate(24, 3, '-');

So, can we encapsulate these things? We need to use prototype. Look at the example below:


 var Cal = function(x, y){

this.x = x;


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 )!


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

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

Explore object-oriented programming in Go Explore object-oriented programming in Go Apr 04, 2024 am 10:39 AM

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.

PHP Advanced Features: Best Practices in Object-Oriented Programming PHP Advanced Features: Best Practices in Object-Oriented Programming Jun 05, 2024 pm 09:39 PM

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.

How to get HTTP status code in JavaScript the easy way How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

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

Are there any class-like object-oriented features in Golang? Are there any class-like object-oriented features in Golang? Mar 19, 2024 pm 02:51 PM

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

Analysis of object-oriented features of Go language Analysis of object-oriented features of Go language Apr 04, 2024 am 11:18 AM

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.

How to implement an online electronic signature system using WebSocket and JavaScript How to implement an online electronic signature system using WebSocket and JavaScript Dec 18, 2023 pm 03:09 PM

Overview of how to use WebSocket and JavaScript to implement an online electronic signature system: With the advent of the digital age, electronic signatures are widely used in various industries to replace traditional paper signatures. As a full-duplex communication protocol, WebSocket can perform real-time two-way data transmission with the server. Combined with JavaScript, an online electronic signature system can be implemented. This article will introduce how to use WebSocket and JavaScript to develop a simple online

WebSocket and JavaScript: Key technologies for realizing real-time online financial news WebSocket and JavaScript: Key technologies for realizing real-time online financial news Dec 17, 2023 pm 11:21 PM

WebSocket and JavaScript: Key technologies for realizing real-time online financial news Introduction: With the development of the Internet, real-time online financial news has become more and more important to investors and financial practitioners. Traditional network communication methods are difficult to achieve real-time updates, but the WebSocket protocol and JavaScript provide an efficient and reliable solution. This article will introduce the basic principles of WebSocket and JavaScript, and demonstrate how to use it through specific code examples.

See all articles