JS object-oriented usage examples
An object is a collection of properties and methods. What is object-oriented? Object-oriented is a programming idea and a concept. In js, object-oriented programming is implemented through a method called prototype.
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>创建对象</title></head><body><button type="button" onclick="showInfo();">点击显示学生信息</button><script type="text/javascript">
//创建一个学生对象
var student=new Object(); //创建对象的属性并且赋值
student.age=50;
student.name="小黑";
student.address="海淀区"; //创建对象的方法
student.sayHello=function(){
document.write("姓名："+student.name+"<br/>");
document.write("年龄："+student.age+"<br/>");
document.write("住址："+this.address+"<br/>");
} //用户点击按钮触发的事件
function showInfo(){
student.sayHello(); //调用student的方法
} //现在只是创建了一个对象！ 如果我们想创建多个 那么代码冗余！</script></body></html>Create objects through literals
Create a student object
{Attribute 1: value 1, attribute 2: value 2, attribute 3: value 3}
json data format: It is a data conversion format
01. It is in the form of a key-value pair
02. The object is saved in {}
03. The collection is saved in []
04. Data is separated by commas, and attributes and attribute values are separated by colons
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>通过字面量来创建对象</title></head><body>
<button type="button" onclick="showInfo();">点击显示学生信息</button><script type="text/javascript">
var student={
age:50,
name:"小黑",
address:"海淀区",
sayHello:function(){ //方法
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+this.age+"<br/>");
document.write("住址："+this.address+"<br/>");
}
} // student 我们称之为变量 =右边的｛｝中的数据，我们称之为 字面量！
//用户点击按钮触发的事件
function showInfo(){
student.sayHello(); //调用student的方法
} // 问题依然存在：现在只是创建了一个对象！ 如果我们想创建多个 那么代码冗余！</script></body></html>Create multiple objects through constructors
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>通过构造函数创建多个对象</title></head><body><script type="text/javascript">
//创建构造函数 函数名称首字母必须大写
function Student(name,age,address){
//声明属性并赋值
this.name=name; this.age=age; this.address=address; //设置方法
this.sayHello=function(){
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+this.age+"<br/>");
document.write("住址："+this.address+"<br/>");
}
} //创建多个对象
var stu1=new Student("小黑1",50,"天堂1"); var stu2=new Student("小黑2",51,"天堂2"); var stu3=new Student("小黑3",52,"天堂3"); //分别调用对象的方法
stu1.sayHello();
stu2.sayHello();
stu3.sayHello(); // 所有的对象都有一个constructor属性！指向了构造函数！
document.write("stu1.constructor指向了Student："+(stu1.constructor==Student)+"<br>"); //instanceof 判断某个对象是否属于某个类型
document.write("stu1属于Student吗？"+(stu1 instanceof Student)+"<br>");
document.write("stu1属于Object吗？"+(stu1 instanceof Object)+"<br>");
document.write("stu1属于Function吗？"+(stu1 instanceof Function)+"<br>");</script></body></html>Prototype objects
Note point:
01. All objects have a constructor attribute! Points to the constructor!
02. When we create a function, the function will have a prototype attribute,
This attribute points to the prototype object created through the constructor! Student.prototype
03. A prototype object is an object in memory that provides shared properties and methods for other objects!
04.The prototype attribute is only available to functions!
05. Each object has a__proto__attribute, which points to the prototype object!
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>原型对象</title></head><body><script type="text/javascript">
/*创建一个构造函数*/
function Student(){} //通过原型对象来创建对象
Student.prototype.name;
Student.prototype.age;
Student.prototype.address;
Student.prototype.sayHello=function(){
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+this.age+"<br/>");
document.write("住址："+this.address+"<br/>");
} var stu1=new Student();
stu1.name="小白";
stu1.age=52;
stu1.address="天上人间"; var stu2=new Student();
stu2.sayHello(); // 验证每个对象都有一个__proto__属性，指向了原型对象！
document.write(stu2.__proto__==Student.prototype);</script></body></html>01. The prototype attribute is only available to functions!
02. Each object has a__proto__attribute, which points to the prototype object!
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>深入原型对象</title></head><body><script type="text/javascript">
//01.验证只有函数有prototype属性
var a={};
document.write(a.prototype+"<br/>");
document.write(a.__proto__+"<br/>"); var b=function(){}
document.write(b.prototype+"<br/>");
document.write(b.__proto__+"<br/>"); var c=new b(); // 02.验证每个对象都有一个__proto__属性，指向了原型对象！
document.write(c.__proto__== b.prototype);</script></body></html>Prototype chain
Prototype chain:
01. A prototype object is an instance of another prototype object! A kitten is an example of an animal!
02. The related prototype chains progress layer by layer, forming a chain of instances and prototype objects. We call it the prototype chain!
The black cat squatting in the corner (example)
inherit
Cat class (01. Equivalent to a black cat, it is a prototype object 02. Compared to an animal, it is an instance)
inherit
Animal class (01. Prototype object of all animals 02. Instance of object)
inherit
Object (the top level of all prototype objects)
As long as it is an object, it has the__proto__attribute, pointing to the prototype object!
question:
Object is an object!
It has__proto__attribute!
The attribute value is null!
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>原型链</title></head><body><script type="text/javascript">
//模拟一个构造函数
var Student=function(){}; var stu1=new Student();
document.write(stu1.__proto__+"<br/>"); //student
document.write(stu1.__proto__.__proto__+"<br/>");//function
document.write(stu1.__proto__.__proto__.__proto__+"<br/>"); // object null
document.write("===================================");
document.write((stu1.__proto__===Object.prototype)+"<br/>"); //false
document.write((Student.prototype.__proto__===Object.prototype)+"<br/>"); //true</script></body></html>Borrow constructor
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>借用构造函数的同时传递参数</title></head><body>
<script type="text/javascript">
//创建Animal的构造
function Animal(name){
this.name=name;
} //创建Dog的构造
function Dog(){
//借用构造 传递参数
Animal.call(this,"小黑狗"); this.age=50;
} //创建Cat的构造
function Cat(){
//借用构造
Animal.call(this,"小猫咪"); this.health=100;
} //创建小狗的实例
var dog1=new Dog();
document.write(dog1.name);
document.write(dog1.age); //创建小猫咪的实例
var cat1=new Cat();
document.write(cat1.name);
document.write(cat1.health); </script></body></html>Combined inheritance
Combined inheritance:
Sometimes called pseudo-classical inheritance, it combines the techniques of prototype chaining and borrowing constructors,
An inheritance pattern that leverages the best of both worlds uses the prototype chain to inherit prototype properties and methods.
Inheriting instance attributes is achieved by borrowing constructors
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>组合继承</title></head><body><script type="text/javascript">
/*构造方法*/
function Person(name){
this.name=name; this.names=["hei","bai","pei"];
}
Person.prototype.sayHello=function(){
alert(this.name);
} function Student(name,age){
Person.call(this,name); //继承属性 借用构造
this.age=age;
}
Student.prototype=new Person();//继承了方法 原型链
//student特有的方法
Student.prototype.sayBey=function(){
alert(this.name);
} /*创建对象*/
var stu=new Student("小黑黑",50);
stu.names.push("小白白");
document.write(stu.names+"<br/>");
stu.sayHello();
stu.sayBey(); var stu1=new Student("小黑黑2",50);
document.write(stu1.names+"<br/>");
stu1.sayHello();
stu1.sayBey();</script></body></html>Related recommendations:
Detailed explanation of js object-oriented inheritance knowledge
Detailed description of JS object-oriented programming
JavaScript object-oriented design_js object-oriented
The above is the detailed content of JS object-oriented usage examples. For more information, please follow other related articles on the PHP Chinese website!
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
Analyze the usage and classification of JSP comments
Feb 01, 2024 am 08:01 AM
Classification and Usage Analysis of JSP Comments JSP comments are divided into two types: single-line comments: ending with, only a single line of code can be commented. Multi-line comments: starting with /* and ending with */, you can comment multiple lines of code. Single-line comment example Multi-line comment example/**This is a multi-line comment*Can comment on multiple lines of code*/Usage of JSP comments JSP comments can be used to comment JSP code to make it easier to read
Usage of WPSdatedif function
Feb 20, 2024 pm 10:27 PM
WPS is a commonly used office software suite, and the WPS table function is widely used for data processing and calculations. In the WPS table, there is a very useful function, the DATEDIF function, which is used to calculate the time difference between two dates. The DATEDIF function is the abbreviation of the English word DateDifference. Its syntax is as follows: DATEDIF(start_date,end_date,unit) where start_date represents the starting date.
How to correctly use the exit function in C language
Feb 18, 2024 pm 03:40 PM
How to use the exit function in C language requires specific code examples. In C language, we often need to terminate the execution of the program early in the program, or exit the program under certain conditions. C language provides the exit() function to implement this function. This article will introduce the usage of exit() function and provide corresponding code examples. The exit() function is a standard library function in C language and is included in the header file. Its function is to terminate the execution of the program, and can take an integer
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
Detailed explanation and usage introduction of MySQL ISNULL function
Mar 01, 2024 pm 05:24 PM
The ISNULL() function in MySQL is a function used to determine whether a specified expression or column is NULL. It returns a Boolean value, 1 if the expression is NULL, 0 otherwise. The ISNULL() function can be used in the SELECT statement or for conditional judgment in the WHERE clause. 1. The basic syntax of the ISNULL() function: ISNULL(expression) where expression is the expression to determine whether it is NULL or
Use CSS Transform to transform elements
Feb 24, 2024 am 10:09 AM
Usage of Transform in CSS The Transform property of CSS is a very powerful tool that can perform operations such as translation, rotation, scaling and tilting of HTML elements. It can dramatically change the appearance of elements and make web pages more creative and dynamic. In this article, we will introduce the various uses of Transform in detail and provide specific code examples. 1. Translate (Translate) Translate refers to moving an element a specified distance along the x-axis and y-axis. Its syntax is as follows: tran
How to use Apple shortcuts
Feb 18, 2024 pm 05:22 PM
How to use Apple shortcut commands With the continuous development of technology, mobile phones have become an indispensable part of people's lives. Among many mobile phone brands, Apple mobile phones have always been loved by users for their stable systems and powerful functions. Among them, the Apple shortcut command function makes users’ mobile phone experience more convenient and efficient. Apple Shortcuts is a feature launched by Apple for iOS12 and later versions. It helps users simplify their mobile phone operations by creating and executing custom commands to achieve more efficient work and
Using the distinct keyword in parsing SQL
Feb 18, 2024 pm 09:21 PM
Detailed explanation of distinct usage in SQL In SQL databases, we often encounter situations where we need to remove duplicate data. At this time, we can use the distinct keyword, which can help us remove duplicate data and make the query results clearer and more accurate. The basic usage of distinct is very simple, just use the distinct keyword in the select statement. For example, the following is a normal select statement: SELECTcolumn_name
