zoukankan      html  css  js  c++  java
  • 风趣的JavaScript面向对象入门课程一

    在我们程序猿界一直流传这这么一个joke,没女票我们可以new一个、没房子没票子没车子我们同样new一个!当然这听着更像是一种自嘲,毕竟我们程序猿都爱自嘲,哈哈,废话不多说,今天就由我带着你们来入JavaScript面向对象这个坑!千万别弃坑!

     

    一、理解对象:

    创建对象的两种方法:直接声明、Object的实例化

    直接声明:

     1 Var zhangsan = {
     2 
     3 Name : “zhangsan”,
     4 
     5 Age : 29,
     6 
     7 //创建一个introduce函数,用于返回张三的姓名
     8 
     9 introduce.function(){
    10 
    11 return zhangsan.name;
    12 
    13 }
    14 
    15 }

    Object的实例化:

     1 Var zhangsan = new Object();
     2 
     3 zhangsan.name = “zhangsan”;
     4 
     5 zhangsan.age = 29;
     6 
     7 zhangsan.introduce = function(){
     8 
     9 return zhangsan.name;
    10 
    11 };
    12 
    13  

    调用方法:

    1 Document.write(zhangsan.name+zhangsan.age);或者
    2 
    3 Alert(zhangsan.introduce());

    二、类的实现:

     

    工厂生产对象:适用于当需要大规模输出对象时的问题

     1 Function CreateCar(engine,tire){
     2 
     3 Var car = new Object();
     4 
     5 car.engine=engine;
     6 
     7 car.tire   = tire;
     8 
     9 return car;
    10 
    11 }

    调用工厂生产对象:

    Var Audi = CreateCar(”four-engine”,”four-tire”);


    生产出Audi一辆,即new了一个对象

    说白了,工厂模式就是把创建对象的方法封装在函数中。

     

    实际上,当你用instanceof运算符对实例Audi检测时:

    Alert(Audi instanceof car);

    结果会弹出对话框显示false。

    即Audi不是car实例化出的对象!

     

    三、构造函数

    为解决上述问题特引入构造函数大佬

    将以上的代码略作改写:

     1 Function CreateCar(engine,tire){
     2 
     3 this.engine=engine;
     4 
     5 this.tire=tire;
     6 
     7 this.drive = function(){
     8 
     9 document.wirte(this.engine+this.tire);
    10 
    11 };
    12 
    13 }

    其实构造函数就是一个带this的普通函数,它不是大佬,哈哈!它里面的this就指通过这个构造函数生成一个新的对象。

     

    虽说我们揭开了它大佬的面纱,但大佬还是大佬,它还是有用的..

     

    1 Var Audi = new car(”four-engine”,”four-tire”);
    2 
    3  
    4 
    5 Alert(Audi instanceof car);

    结果惊人的弹出显示:true

    大佬果然是大佬!

    但问题又来了,大佬也不是没有缺点,它的模式虽然好用,但是存在浪费内存的嫌疑,这就让大佬的声誉受到了严重的影响:

                           

    每一次生成一个person对象,都必须重新构建一遍sayName函数,真的麻烦!

     

    铛,铛,铛!震惊 “全局函数” 出场竟然..

     

    1 Function sayName(){
    2 
    3    Document.write(this.name);
    4 
    5 }

    然后再把person类中将sayName()指向外部的sayName()

    this.sayName = sayName;

    厉害了wold哥!

     

     

    问题又来了,在全局变量中定义的函数只能被某个对象所调用,让这个函数有点名不副实的样子,而且当对象如果需要很多方法,就需要定义同样多的全局变量。这样对象的封装就毫无意义可言。这些问题我们都可以通过原型模式(Prototype)来解决。

     

    原来一山更比一山高啊,这世外高人第一次见..

        Person.prototype.sayName = function (){
    
            document.write (this.name);
    
    };

    与之前的:

    Function sayName(){
    
       Document.write(this.name);
    
    }

    相比,第二个好low!

     

    那么这位世外高人有什么用呢?

     

    废话不多说上代码:

    personA.sayName = function(){
    
        document.write("personA:"+this.name+"<br/>");
    
    }//对父对象中的方法进行复写,personA是person函数实例化出的一个新对象

    哇!QAQ

    本期的风趣的JavaScript面向对象课程就结束啦,谢谢大家的浏览和指正!我们下期再见!

  • 相关阅读:
    Nginx编译安装及平滑升级
    alertmanager 分组,抑制, 静默
    alertmanager 邮件告警&自定义告警模板
    alertmanager 高可用
    程序运行报错UnicodeDecodeError: 'utf8' codec can't decode byte 0x89 in position 0: invalid start byte
    Postman 导入curl 、导出成curl、导出成对应语言代码
    Python 字符串操作(截取/替换/查找/分割)
    In testLogin: indirect fixture *** doesn‘t exist
    postman 传参传递二进制流文件
    开发经验01
  • 原文地址:https://www.cnblogs.com/ldw-blogs/p/7567680.html
Copyright © 2011-2022 走看看