zoukankan      html  css  js  c++  java
  • JavaScript面向对象

           1.对象是什么

                  对象是包含相关属性和方法的集合体

           2.什么是面向对象

                  1.面向对象仅仅是一个概念或者编程思想

                  2.通过一种叫做原型的方式来实现面向对象编程

           3.创建对象

                  基于Object对象的方式创建对象

                         var  对象名称 = new Object();

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <script>
                var person = new Object();
                person.name = "小明";
                person.hobby = "范德萨、范德萨、";
                person.showName = function(){
                    alert(this.hobby);
                }
                person.showName();
            </script>
        </body>
    </html>

           4.使用字面量赋值方式创建对象

                  

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <title>创建对象</title>
     6     </head>
     7     <body>
     8         <script>
     9             var person={
    10                 name:"小明",
    11                 sex:"",
    12                 age:18,
    13                 hobby:"呃呃、范德萨、 士大夫、但是、",
    14                 showName:function(){
    15                     alert(this.name);
    16                 }
    17             }
    18             person.showName();
    19         </script>
    20     </body>
    21 </html>

           5.如何解决使用同一个接口不需要创建很多对象,减少产生大量的重复代码?

                  1.构造函数

                         function Person(){}   构造函数始终都应该首字母大写

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <title>构造函数</title>
     6     </head>
     7     <body>
     8         <script>
     9             function Person(name,sex,age,hobby){
    10                 this.name = name;
    11                 this.sex = sex;
    12                 this.age = age;
    13                 this.hobby = hobby;
    14                 this.showName = function(){
    15                     alert(this.name);
    16                 }
    17             }
    18             var person1=new Person("小明","",18,"范德萨  大范式  啊啊啊");
    19             person1.showName();
    20             var person2=new Person("小的","",15,"范德萨 放到是  大范式  啊啊啊");
    21             person2.showName();
    22             
    23             alert(person1.constructor);
    24             alert(person1.constructor==Person);
    25             
    26             alert(person1 instanceof Object);
    27             alert(person1 instanceof Person);
    28             alert(person2 instanceof Person);
    29         </script>
    30     </body>
    31 </html>

                调用构造函数的4个步骤

                                1.创建一个新对象

                                2.将构造函数的作用域赋给新对象(this)

                                3.执行构造函数中的代码

                                4.返回新对象

                         使用 instanceof和constructor来检验对象类型

                   2.原型对象

     1 <html>
     2     <head>
     3         <meta charset="utf-8" />
     4         <title>原型对象</title>
     5     </head>
     6     <body>
     7         <script>
     8             function Person(){
     9                 
    10             }
    11             Person.prototype.name ="小明";
    12             Person.prototype.sex="";
    13             Person.prototype.age=18;
    14             Person.prototype.hobby="范德萨 现在才 微软";
    15             Person.prototype.showName=function(){
    16                 alert(this.name);
    17             }
    18             var person1 = new Person();
    19             person1.showName();
    20             var person2 = new Person();
    21             var person3 = new Person();
    22             person2.name = "呃呃";
    23             alert(person2.name);
    24             alert(person3.name);
    25         </script>
    26     </body>
    27 </html>

                  原型对象  也就是给每个属性一个初始值,使它没呀成为空值的情况

           6.继承

                  1.原型链

                         一个原型对象是另一个原型对象的示例

                         相关的原型对象层层递进,就构成了示例与原型的链条,也就是原型链

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <title></title>
     6     </head>
     7     <body>
     8         <script>
     9             function Humans(){
    10                 this.foot=2;
    11             }
    12             Humans.prototype.getFoot=function(){
    13                 return this.foot;
    14             }
    15             function Man(){
    16                 this.head=1;
    17             }
    18             Man.prototype=new Humans();
    19             Man.prototype.getHead=function(){
    20                 return this.head;
    21             }
    22             var man1 = new Man();
    23             alert(man1.getFoot());
    24             alert(man1.getHead());
    25             alert(man1 instanceof Object);
    26             alert(man1 instanceof Humans);
    27             alert(man1 instanceof Man);
    28         </script>
    29     </body>
    30 </html>

                  2.对象继承

                         

     1              Man.prototype=new Humans();
     2             Man.prototype.getHead=function(){
     3                 return this.head;
     4             }
     5             var man1 = new Man();
     6             alert(man1.getFoot());
     7             alert(man1.getHead());
     8             alert(man1 instanceof Object);
     9             alert(man1 instanceof Humans);
    10             alert(man1 instanceof Man);

                  3.借用构造函数

                         apply:应用某一个对象的一个方法,用另一个对象替换当前对象

                         call:调用一个对象的方法,以另一个对象替换当前对象

                        push:加入值

               

     1 <html>
     2     <head>
     3         <meta charset="utf-8" />
     4         <title></title>
     5     </head>
     6     <body>
     7         <script>
     8             function Humans(){
     9                 this.clothing=["范德萨","发短信","范德萨信息"];
    10             }
    11             function Man(){
    12                 Humans.call(this);
    13             }
    14             var man1 = new Man();
    15             man1.clothing.push("呃呃");
    16             alert(man1.clothing);
    17             var man2 = new Man();
    18             alert(man2.clothing);
    19         </script>
    20     </body>
    21 </html>

                              传递参数

        

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <title></title>
     6     </head>
     7     <body>
     8         <script>
     9             function Humans(name,sex){
    10                 this.name=name;
    11                 this.sex=sex;
    12             }
    13             function Man(){
    14                 Humans.call(this,"小明","");
    15                 this.age=19;
    16             }
    17             var man1 = new Man();
    18             alert(man1.name);
    19             alert(man1.age);
    20             alert(man1.sex);
    21         </script>
    22     </body>
    23 </html>

                     组合继承

                               也叫做伪经典继承

                                        将原型链和借用构造函数的技术组合到一块,发挥二者之长的一种继承模式

                                        使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <title></title>
     6     </head>
     7     <body>
     8         <script>
     9             function Humans(name){
    10                 this.name = name;
    11                 this.clothing=["dsas","fds","sdfd"];
    12             }
    13             Humans.prototype.sayName = function(){
    14                 alert(this.name);
    15             }
    16             function Man(name,age){
    17                 Humans.call(this,name);
    18                 this.age=age;
    19             }
    20             Man.prototype = new Humans();
    21             Man.prototype.sayAge=function(){
    22                 alert(this.age);
    23             }
    24             
    25             var man1 = new Man("1314",19);
    26             man1.clothing.push("fdsff");
    27             alert(man1.clothing);
    28             man1.sayName();
    29             man1.sayAge();
    30             var man2 = new Man("xzvx",19);
    31             alert(man2.clothing);
    32             man2.sayName();
    33             man2.sayAge();
    34         </script>
    35     </body>
    36 </html>
  • 相关阅读:
    node
    前端工程师的思考
    前端工程师需要具备的条件
    产品经理必须掌握的名词
    金融人必须掌握的词汇
    央企降两金、降杠杆的 “兵器谱”
    抽屉协议
    清分、清算、结算的关系
    如何有效规避风险
    浅谈在项目管理过程中风险管理
  • 原文地址:https://www.cnblogs.com/yangshuwen/p/13178242.html
Copyright © 2011-2022 走看看