当前位置: 首页 > Web前端 > vue.js

js构造函数详解

时间:2023-03-31 17:15:25 vue.js

1.JS函数  首先搞清楚什么是函数。根据RhinoBook,函数只是重复执行的代码块。函数是一段JavaScript代码,它被定义一次,但可以被执行或调用任意次。如何定义一个函数:    1.声明式函数定义:函数函数名(){};这样声明的函数是在最小的作用域内使用的,在这个作用域内,你可以调用这个函数供自己使用。    2。函数表达式:letfun=function(){};这样定义的函数只能在这个作用域内执行完这段赋值代码后通过fun()调用,否则由于变量Declarehoist,fun===undefined。    3.新函数形式:varfun1=newFunction(arg1,arg2,arg3,…,argN,body);Function构造函数的所有参数都是字符串类型。除最后一个参数外,其余参数均作为生成函数的参数,即形参。这里不能有参数。最后一个参数表示要创建的函数的函数体。    总结:1、函数定义的第一种和第二种方法,其实就是第三个newFunction的语法糖。当我们定义一个函数的时候,我们会通过newFunction来创建一个函数,但是前两个是给我们封装的,我们是看不到的,js中的任何一个函数都是Function的一个实例。2.ECMAScript定义的函数实际上是功能完备的对象。2.构造函数  定义:通过new函数名实例化一个对象的函数称为构造函数。任何函数都可以作为构造函数存在。之所以有构造函数和普通函数,主要是从函数上区分的。构造函数的主要作用是初始化对象,特点是和new一起使用。new是创建对象,从头开始,constructor是给初始化的对象添加属性和方法。构造函数定义是大写的(规范)。  对new的理解:new申请内存,创建对象,调用new时,后台会隐式执行newObject()创建对象。因此,new创建的字符串和数字是引用类型,不是值类型。  1。常用构造函数:    1.变量arr=[];是vararr=newArray();的语法糖。    2。varobj={}是varobj=newObject();的语法糖    3. vardate=newDate();,执行构造函数时会发生什么:letf=newFoo();      functionFoo(name,age,sex){        this.name=name;        this.age=age;        this.sex=sex;      }      Foo.prototype.belief=function(){        console.log('量变是质变的必要准备,而质变是量变到一定程度的必然结果!');      }      letf=newFoo('zh',18,'男');    一个。让f={};//创建一个继承自Foo.prototype的新对象。    b。f.__proto__=Foo.prototype;//f继承了Foo的原型。    bFoo.call(f,'zh',18,'男');//执行Foo函数,将name、age、sex参数传入Foo中执行,函数内部this为new对象创建的f,所以f.name='zh';f.年龄=18;f.sex='男';    c。对象实例化完成,此时f={                name:'zh',                age:18,                sex:'男'              }    d。f.信念();打印'量变是质变的必要准备,而质变是量变积累到一定程度的必然结果!    手写新函数      functionnewTest(constructFunction){      letobj={};      obj.__proto__=constructFunction.prototype;obj,arguments);        returnobj;      }    }   注意:当构造函数中有return对象时,最终new的对象将是构造函数的返回值,而不是中生成的新进程对象。只有当构造函数的返回值是一个对象时才有效。当它不是一个对象时,它仍然返回new过程中形成的对象(无论如何,new构造函数之后都会返回一个对象值)。3、ES6中类与构造函数的关系  class是构造函数的语法糖,即类的本质是构造函数。classextends的继承本质上是构造函数原型链的继承。  例如:  类的写法  classPerson{//定义一个名为Person的类    constructor(name,age){//constructor是接收参数的构造方法      this.name=名字;//this代表实例对象      this.age=age;    }     say(){//这是一个类方法,注意不要添加function      returnthis.name+this.age    }  }  varobj=newPerson('老铁',18);  console.log(obj.say());  构造函数怎么写    functionPerson(name,age){//名字constructor和实例化的结构相同且大写(不是强制的,但有助于区分constructor和普通函数)      if(!(thisinstanceofPerson)){//防止用户误说执行了Personasanormalfunction        thrownewError(''PleaseusenewPerson");//模仿ES6类中的写法      }      this.name=name;      this.age=age;    }      Person.prototype.say=function(){      returnthis.name+this.age    }      varobj=newPerson('老铁',18);//通过构造函数创建对象,必须使用new操作符  console.log(obj.say());  总结:类定义的类和构造函数定义的类本质上是t他一样。而当js执行时,第一种会转入第二种执行。所以ES6写类的本质就是构造函数。