JS面向对象用法实例-js教程-PHP中文网

首页

web前端

js教程

JS面向对象用法实例

小云云

Mar 06, 2018 pm 02:06 PM

javascript实例用法

对象是包含了属性和方法的集合体。什么是面向对象呢？面向对象就是一种编程思想，是一个概念。在js中，通过一种叫做原型的方式来实现面向对象编程。

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

通过字面量来创建对象

创建一个学生对象
{属性1:值1，属性2:值2，属性3:值3}
json数据格式：是一种数据转换格式
01. 是一个键值对的形式
02. 对象保存在｛｝中
03. 集合保存在[]中
04. 数据由逗号分隔，属性和属性值使用冒号分割

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

通过构造函数创建多个对象

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

原型对象

注意点:
01.所有的对象都有一个constructor属性！指向了构造函数！
02.当我们创建一个函数的时候，该函数就会有一个prototype属性，
这个属性指向了通过构造函数创建的那个原型对象！Student.prototype
03.原型对象就是内存中为其他对象提供共享属性和方法的对象！
04.prototype属性只有函数才有！
05.每个对象都有一个__proto__属性，指向了原型对象！

<!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.prototype属性只有函数才有！
02.每个对象都有一个__proto__属性，指向了原型对象！

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

原型链

原型链：
01.一个原型对象是另一个原型对象的实例！小猫是动物的一个实例！
02. 相关的原型链层层递进，就构成了实例和原型对象的链条，我们就称之为原型链！
蹲在角落里的那只黑猫（实例）
继承了
猫类（01.相当于黑猫来说是原型对象 02.相对于动物来说是一个实例）
继承了
动物类（01.所有动物的原型对象 02.object的实例）
继承了
Object（所有原型对象的顶级）
只要是个对象都有__proto__属性，指向了原型对象！
问题：
Object是对象！
有__proto__属性！
属性值是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>

借用构造函数

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

组合继承

组合继承：
有时也叫做伪经典继承将原型链和借用构造函数的技术组合到一块，
发挥二者之长的一种继承模式使用原型链实现对原型属性和方法的继承，
而通过借用构造函数来实现对实例属性的继承

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

相关推荐：
js面向对象之继承知识详解

JS面向对象编程详细说明

JavaScript面象对象设计_js面向对象

以上是JS面向对象用法实例的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr

node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O，这在很大程度上要归功于流。流媒体汇总处理数据，避免内存过载 - 大型文件，网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript：性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在：1)Python作为解释型语言，运行速度较慢，但开发效率高，适合快速原型开发；2)JavaScript在浏览器中受限于单线程，但在Node.js中可利用多线程和异步I/O提升性能，两者在实际项目中各有优势。

JavaScript的起源：探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年，由布兰登·艾克创造，实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后：什么语言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行，依赖JavaScript引擎解析和执行代码。1）解析阶段生成抽象语法树（AST）；2）编译阶段将AST转换为字节码或机器码；3）执行阶段执行编译后的代码。

Python和JavaScript的未来：趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括：1.Python将巩固在科学计算和AI领域的地位，2.JavaScript将推动Web技术发展，3.跨平台开发将成为热门，4.性能优化将是重点。两者都将继续在各自领域扩展应用场景，并在性能上有更多突破。

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。