Home > Article > Web Front-end > JS object-oriented usage examples

JS object-oriented usage examples

小云云Original: 2018-03-06 14:06:021464browse

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>

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!

Statement：

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

Previous article：Detailed explanation of Promise object instances in jsNext article：Detailed explanation of Promise object instances in js

See more