JavaScript Crash Course—Object-Oriented Programming

Table of contents

1. Class definition and instantiation

1. Class definition

2. Instantiation of classes

2. Access and add properties and methods of objects

1. Access the properties and methods of the object

2. Add object properties and methods to the object

3. Inheritance

1. Prototype implementation inheritance

2. Constructor implements inheritance

3. Redefine the method of inheriting from the parent class


1. Class definition and instantiation

        There is no keyword to declare a class in JavaScript, and there is no permission control for class access. JavaScript uses functions to define classes.

1. Class definition

        Syntax for defining classes:

function className(){

}

example:

function student(){
this.name="myun";
this.age=22;
this.school="ybu";
this.like=function(){
alert("hello world, hello time");
}
}
2. Instantiation of classes

        The instantiation of a class in JavaScript uses the keyword new. The instantiation of a class is the creation of an object.

Create object syntax:

new className();

Example: the above student class

var student=new student();
student.like();

        In JavaScript, you can also initialize objects directly through objects. This method can generate instances without using the new keyword:

var student={
name:"myun";
age:22
school:"ybu";
like:function(){
alert("hello world hello time");
}
/* 或者
student.like=function(){
alert("hello world hello time");
}
*/
}

2. Access and add properties and methods of objects

        A property is a variable used to represent the characteristics of an object, and a method is a function used to represent the operation of an object.

1. Access the properties and methods of the object

(1) Use "." to access object properties

grammar:

objectName.propertName

objectName object name

propertyName property name

(2) Use "[ ]" to access object properties

grammar:

objectName[propertyName]

(3) Use "." to access the object's method

grammar:

objectName.methodName()

objectName object name

methodName function name

For example:

function student(name,age){
this.name=name;
this.age=age;
this.school=age;
this.like=function(){
alert("hello world, hello time");
}
}
var student=name student("myun",22);
alert("school"+student.school);  //访问对象属性
alert("name"+student[name]);
alter("method"+student.like());  //访问方法
2. Add object properties and methods to the object

        JavaScript can add properties and methods when defining a class, or dynamically add properties and methods after creating an object.

example:

function Student(name,age){
this.name=name;
this.age=age;
this.school=age;
this.like=function(){
alert("hello world, hello time");
}
}
var student=name Student("myun",22);
alert("school"+student.school);  //访问对象属性
alert("name"+student[name]);
alter("method"+student.like());  //访问方法
//动态添加属性和方法
student.sex=“男”;
student.say=function(){
alert("添加方法");
}

        It is worth noting that the sex attribute and say() are added dynamically. They only attribute the student object. If you instantiate a student1 object, student1.say() is the wrong usage.

        If you want to add properties and methods that can be shared by all objects, you can use native functions to add properties and methods:

function Student(name,age){
this.name=name;
this.age=age;
this.school=age;
this.like=function(){
alert("hello world, hello time");
}
}
var student=name Student("myun",22);
var student1=name Student("myun9527",22);
//原生函数动态添加属性和方法
Student.sex=“男”;
Student.say=function(){
alert("原生函数添加方法");
}
//所有对象共享添加的对象
student.say();
alert(student.sex);
student1.say();
alert(student1.sex);

3. Inheritance

        Inheritance means that the properties and methods of an object come from another object. In this case, the former object is called a subclass, and the latter is a parent class. There are two inheritance methods commonly used in JavaScript, namely prototype implementation inheritance and constructor implementation inheritance.

1. Prototype implementation inheritance

        Prototype implementation inheritance means that the method for a subclass to specify a parent class is to assign the instance object of the parent class to the prototype attribute of the subclass. The syntax is:

A.prototype=new B(....);

example: 

function Student(name,age){
this.name=name;
this.age=age;
}

Student.prototype.say(){
alert("原型函数name:"+this.name);
}

function boys(sex){
this.sex=sex;
}

boys.prototype=new Student("myun",22)  //将Student设置为boys的父类

boys.prototype.tell(){
alert(this.name,this.age.this.sex);
}

var student=new Student("myun1",22);
var boys1=new boys("male");
boys1.say();   //myun
boys1.tell();   //myun,22,male
2. Constructor implements inheritance

        The constructor implementation of inheritance is to use call in the constructor of the subclass to call the parent class constructor function, thereby solving the problem of passing parameters to the parent class constructor and realizing inheritance.

example:

function Student(name,age){
this.name=name;
this.age=age;
}

Student.prototype.say(){
alert("原型函数name:"+this.name);
}

function boys(name,age,sex){
Student.call(this,name,age);  //调用call传参
this.sex=sex;
}

boys.prototype=new Student()  //将Student设置为boys的父类

boys.prototype.tell(){
alert(this.name,this.age.this.sex);
}

var student=new Student("myun1",22);
var boys1=new boys("myun",22,"male");
boys1.say();   //myun
boys1.tell();   //myun,22,male
3. Redefine the method of inheriting from the parent class

        If a subclass wants to redefine a method inherited from the parent class, then it only needs to have the same method name as the method name inherited from the parent class, such as the say() method above:

boys.prototype.say=function(){
alert("这是子类中的say()方法");
}

var boy=new boys();
boy.say();  //调用自己的say()函数,不再是继承父类的函数

Guess you like

Origin blog.csdn.net/weixin_63009369/article/details/133103785