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

    一,JavaScript中的基本数据类型:

                              number(数值类型)

                              string(字符串类型)

                              boolean(布尔类型)

                              null(空类型)

                             undefined(未定义类型)

                             object

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

    三,面向对象:面向对象仅仅是一个概念或者编程思想 

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

    四,自定义对象:语法:var 对象名称=new Object( );

    示例:
        var flower=new Object();
        flower.name="长春花";
        flower.genera="夹竹桃科 长春花属";
        flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
        flower.uses="观赏或用药等";
        flower.showName=function(){    alert(this.name);    
    } flower.showName();

         

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

    var flower={
            name:"长春花",
            genera:"夹竹桃科 长春花属",
            area:"非洲、亚热带、热带以及中国大陆的华东、西南、中南等地",
            uses:"观赏或用药等",
            showName:function(){ alert(this.name); }
        }
     flower.showName();

    五,内置对象:常见的内置对象

                             String(字符串)对象

                             Date(日期)对象

                             Array(数组)对象

                             Boolean(逻辑)对象

                             Math(算数)对象

                             RegExp对象

    六,构造函数:  

    示例:
        function Flower(name,genera,area,uses){
            this.name=name;
           …….
            this.showName=function(){
                alert(this.name);
            }
        }
       var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等")
        
    flower1.showName();

         var flower2=new Flower("牡丹","芍药科 芍药属","中国","观赏、食用或药用"); 

         flower2.showName();

         var flower3=new Flower("曼陀罗花","茄科 曼陀罗属","印度、中国北部","观赏或药用");

         flower3.showName();

    
    

    七,调用构函数的4个步骤

              创建一个新对象

              将构造函数的作用域赋给新对象(this就指向了这个新对象)

              执行构造函数中的代码

              返回新对象

     八,constructor属性指向构造函数

             instanceof操作符检测对象类型

     九,原型对象

        

    示例:
    function Flower(){
    
        }
        Flower.prototype.name="曼陀罗花";
        Flower.prototype.genera="茄科 曼陀罗属";
        Flower.prototype.area="印度、中国北部";
        Flower.prototype.uses="观赏或药用";
        Flower.prototype.showName=function() {
            alert(this.name);
        }
        var flower1=new Flower();
        flower1.showName();
        var flower2=new Flower();
        flower2.showName();
        alert(flower1.showName==flower2.showName);

    十,原型链:一个原型对象是另一个原型对象的实例

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

     

    示例:
          function Humans(){
            this.foot=2;
        }
        Humans.prototype.getFoot=function(){
           return this.foot;
        }
        function Man(){
            this.head=1;
        }
        Man.prototype=new Humans();          //继承了Humans
        Man.prototype.getHead=function(){
            return this.head;
        }
        var man1=new Man();
        alert(man1.getFoot());                          //2
        alert(man1 instanceof Object);          //true     
        alert(man1 instanceof Humans);        //true
        alert(man1 instanceof Man);          //true

    十一,借用构造函数:语法:apply([thisOjb[,argArray]]) (应用某一对象的一个方法,用另一个对象替换当前对象)

                                                   call([thisObj[,arg1[,arg2[, [,argN]]]]]) (调用一个对象的一个方法,以另一个对象替换当前对象)

    示例:
       function Humans(name){
            this.name=name;
        }
        function Man(){
            Humans.call(this,"mary");   //继承了Humans,同时还传递了参数
            this.age=38;              //实例属性
        }
        var man1=new Man();
        alert(man1.name);       //输出mary
        alert(man1.age);        //输出38

    十二,组合继承:有时也叫做伪经典继承 将原型链和借用构造函数的技术组合到一块,发挥二者之长的一种继承模式 

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

                                     

     

  • 相关阅读:
    iframe
    daterangepicker 时间区间选择
    刷新父窗口
    echars
    原生http请求封装
    css布局方式总结
    js获取http请求响应头信息
    js事件循环机制 (Event Loop)
    http协议的状态码
    javaScript函数节流与函数防抖
  • 原文地址:https://www.cnblogs.com/liuying23/p/10997919.html
Copyright © 2011-2022 走看看