• 构造函数


    1.创建对象的方式
      let obj1={}      //对象字面量
      let obj2=new Object()

      工厂模式(优点:避免产生大量重复代码   缺点:不能识别对象的类型)

      构造函数()

    前2种方式 都是通过同一个接口创建很多对象,某种意义上会产生大量重复代码。

    2.工厂模式

    function creatObj(name,num,job){
       var obj=new Object();
       obj.name=name;
       obj.num=num;
       obj.job=job;
       obj.getName=function(){
          console.log(this.name)
       }
       return obj      
    }        
    
    var obj1=creatObj('aa',23,'work1')   
    //{name: 'aa', num: 23, job: 'work1', getName: ƒ}
    
    var obj2=creatObj('bb',18,'work2')
    {name: 'bb', num: 18, job: 'work2', getName: ƒ}

    obj1==obj2 //false

    优点:避免了重复实例化对象带来的大量重复代码的问题。

    缺点:不能识别出对象的类型

    3.构造函数(原生js提供的构造函数:Array Object Date )

    定义:当任意一个普通函数用于创建同一类型的对象时,他就被称作构造函数

    通过constructor来区分数据类型的,通过instanceof操作符来检测对象类型

    function Fn1(name,num,job){
       this.name=name;
       this.num=num;
       this.job=job;
       this.getName=function(){
          console.log(this.name)
       }
    }        
    
    var obj1=new Fn1('aa',23,'work1')   
    var obj2=new Fn1('bb',18,'work2')
    var arr=new Array(1,2,3)
    //Fn1 {name: 'aa', num: 23, job: 'work1', getName: ƒ} 
    //
    Fn1 {name: 'bb', num: 18, job: 'work2', getName: ƒ}
    //(3)[1,2,3]

    obj1.constructor==Fn1 //true
    obj2.constructor==Fn1 //true
    arr.constructor==Fn1 //false
    obj1 instanceof Fn1   //true
    obj2 instanceof Fn1 //true
    obj1 instanceof Object //true

    特点:

    • 没有显示的创建一个对象
    • 首字母大写,直接在this对象上进行属性和方法额设置
    • 没有return语句 如果要返回 也最好返回this或者非对象类型的值

    作用:

    初始化对象,构造函数就是在为初始化对象添加属性和方法

    调用方式:

    • 通过new操作符来调用
    • 可以像普通函数一样调用
    • 可以用call apply 等方法来调用
    var obj1=new Fn1('aa',23,'work1');
    obj1.getName()    //aa
    
    
    Fn1('bb',13,'work2');
    window.getName()   //bb
    
    var obj3={};
    Fn1.call(obj3,'cc',15,'work3');
    obj3.getName()    //cc

    4.实例化

    定义:实例化对象就相当于由抽象到具体的过程,这个过程就叫实例化


    通过new操作符来实例化一个构造函数的过程

    • 创建一个新对象
    • 将构造函数的作用域赋给新对象,所以构造函数中的this指向了新的实例对象
    • 执行构造函数中的代码,这个过程也就是为这个实例化对象添加属性和方法
    • 返回新对象
  • 相关阅读:
    php字符串相加
    elementUI的input输入一个字符就失去焦点问题
    js鸡尾酒排序算法
    js快速排序算法
    js冒泡排序算法改进
    js实现队列
    EXIF.js 读取图片的方向
    new Image().src资源重复请求问题
    canvas绘制圆图输出图片格式
    去掉"You are running Vue in development mode"提示
  • 原文地址:https://www.cnblogs.com/susu2020/p/16343021.html
Copyright © 2020-2023  润新知