• Javascript基础--类与对象(五)


    js面向(基于)对象编程
    1.澄清概念
    1.1 js中基于对象 == js 面向对象
    1.2 js中没有类class,但是它取了一个新的名字,交原型对象,因此 类 = 原型对象。

    2.为什么需要对象?

    //这里是一个Cat类
    function Cat(){

    }
    Cat(); //函数

    1 function Cat(){}
    2 var cat1 =new Cat(); // 3 //这时cat1就是一个对象(实例) 4 cat1.name = "小白"; 5 cat1.age =3; 6 cat1.color ="白色"; 7 //从上面的代码我们可以看出 8 //1.js中的对象的属性可以动态的添加。 9 //2.属性没有限制 10 window.alert(cat1.name);

    3.类和对象的区别和联系
    3.1 类是抽象的,概念,代表一类事物。
    3.2 对象是具体的,代表一个实体。
    3.3 对象是以类(原型对象)为模板创建。

    4.创建对象的方式有5种
    4.1 工厂方式--使用new Object创建对象并添加相关属性
    4.2 使用构造函数来定义类(原生对象)。目前以这个方法为主
    4.3 使用prototype
    4.4 构造函数及原型混合方式
    4.5 动态原型方式

    5.使用构造函数来定义类(原生对象),然后再创建对象实例
    基本语法
    function 类名/原型对象名(){

    }

    创建对象
    var 对象名 = new 类名();

     1 function Person(){}
     2 window.alert(Person.constructor);
     3 var a = new Person();
     4 window.alert(a.constructor);

    5 window.alert(typeof a);
       
     7 var b=123;
    8 window.alert(b.constructor);
      
     9 window.alert(typeof b); 


    10 var c="123";
    11 window.alert(c.constructor);


    12 window.alert(typeof c);
      
    
    

    js中的一切都是对象

    如何判断一个对象实例是不是Person类型

    1 window.alert(a);
    2 if(a instanceof Person){
    3 window.alert("a是PersonOK1");
    4 }
    5 
    6 if(a.constructor == Person){
    7 window.alert("a是PersonOK2");
    8 }


    6.带 var 和不带 var的区别
    //全局变量

    1 var abc =89;
    2 function test(){
    3 //再函数里,如果你不带var,则表示使用全局的abc变量
    4 //如果你带上var则表示在test()中,定义一个新的abc变量
    5 abc = 900;
    6 }
    7 test();
    8 window.alert(abc);

    访问对象的属性方法有两种:

    (1) 普通方式:对象名.属性名
    (2) 动态访问:对象名["属性名"]

    function Person(){};
    var p1 = new Person();
    p1.name ="顺平";
    window.alert(pl.name);
    var val="na"+"me";
    window.alert(pl[val]);




    var a =new Person();
    a.age=10;
    a.name="小明";
    var b = a;
    b.name ="小白";
    window.alert(b.age+"名字 "+b.name+"名字 "+a.name);


    对象回收机制(GC)
    (1)设置变量为null;

    b=null;  //相当下图中,在栈中把b的地址清空(b = ox1234给清空),此时a中地址没有清空,还是指向堆中ox1234[10,“小白”]
    window.alert(a.age + "a名字" +a.name);
    window.alert("b.age=" + b.age);
    //a = null; 

    当引用次数为0时,不会立即回收内存空间,有一定的回收机制。 


    (2)js还提供一种方式,主动释放对象内存
    delete 对象名.属性名; \这样就会立即释放 对象的这个属性空间

    var a =new Person();
    a.age=10;
    a.name="小明";
    var b = a;
    b.name ="小白";
    window.alert(b.age+"1名字 "+b.name);
    delete a.age; //删除a对象
    window.alert(b.age+"2名字 "+b.name);
    window.alert(a.age+"3名字 "+a.name);


    7. this 关键字

    1 function Person(){
    2 var p1 = new Person();
    3 p1.name = "顺平";
    4 p1.age = 60;
    5 window.alert(p1.name +" "+p1.age);
    6 var p2 = new Person();
    7 window.alert(p2.name);//这里会输出什么?(undefine);
    8 }

    这里我们可以看到 window.alert(p2.name) 会输出 undefined;

    在实际编程中,我们可能有这样的需求,当我们创建一个对象后,就希望该对象自动的拥
    有某些属性[比如:当我们创建一个Person对象后,就希望该对象就自动拥有name和age属性,
    这又怎么办?]

    使用this来解决:

    function Person(){
    this.name = "abc";
    this.age = 90;
    }
    
    var p1 =new Person();
    var p2 =new Person();
    p2.name = "顺平";
    window.alert(p1.name +" " +p2.name);


    //可能大家会这样去思考问题:
    function Person(){
       var name ="abc"; //如果这样去使用name这个属性是私有的
       var age = 900; //私有的,只能在内部使用
       this.name ="abc2" //this.name2表示name2这个属性是公开的
       this.show =function(){ //这个就是Person类的一个公开的方法(特权方法)
       window.alert(name+" "+age);
       show2();
       }
       function show2(){ //这是Person类的一个私有方法,只能在Person中使用
       window.alert("show2()"+name+" "+age);
       }
    }
    var p1 = new Person();
    p1.show();
    //p1.show2(); //z这里会报错!对象不支持此属性或方法
    //window.alert(p1.name +" "+p1.age); //错误
    1 function test1(){
    2 alert(this.v);
    3 }
    4 var v=90;
    5 window.test1();
     1 function Person(){
     2    this.abc = function(){
     3    window.alert(this.v);
     4    }
     5 }
     6 
     7 var p = new Person();
     8 
     9 p.v = "hello";
    10 
    11 p.abc();

    哪个对象实例调用this所在的函数,那么this就代表哪个对象实例。

    注意事项:
    this 不能放在类的外部使用,否则调用者就变成window

  • 相关阅读:
    详解Linux 安装 JDK、Tomcat 和 MySQL(图文并茂)
    详解Linux 安装 JDK、Tomcat 和 MySQL(图文并茂)
    常见的面试C#技术题目
    Struts2中的ModelDriven机制及其运用
    Struts2 中的数据传输的几种方式
    Struts2 中的数据传输的几种方式
    form表单中method的get和post区别
    form表单中method的get和post区别
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
  • 原文地址:https://www.cnblogs.com/luyuwei/p/3689301.html
Copyright © 2020-2023  润新知