js构造函数详解
js构造函数详解
⼀、总结
⼀句话总结：
> 构造函数是⽤new关键字创建，并且⾸字母⼤写，本质上也是个函数，例如var obj = new Person('⽼铁'，18);
function Foo(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
Foo.prototype.belief = function(){
console.log('量变是质变的必要准备，质变是量变积累到⼀定程度的必然结果！');
};
let f = new Foo ('zh',18,'男');
1、js三种创建函数⽅式（声明式函数定义、函数表达式、new Function 形式）的关系？
> 第⼀种和第⼆种函数的定义的⽅式其实是第三种new Function 的语法糖，当我们定义函数时候都会通过 new Function 来创建⼀个函数，只是前两种为我们进⾏了封装，我们看不见了⽽已，js 中任意函数都是Function 的实例
2、构造函数和普通函数的区别？
> 构造函数是⽤new关键字创建，并且⾸字母⼤写，本质上也是个函数，例如var obj = new Person('⽼铁'，18);
function Foo(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
Foo.prototype.belief = function(){
console.log('量变是质变的必要准备，质变是量变积累到⼀定程度的必然结果！');
};
let f = new Foo ('zh',18,'男');
3、js中new关键字的作⽤？
> new关键字会申请内存，当调⽤new关键字创建对象时，会去堆空间⾥⾯申请内存，后台会隐式执⾏new Object()创建对象。
4、js中常⽤的构造函数？
> 1、var arr = []; 为 var arr = new Array()；的语法糖。
> 2、var obj = {}; 为 var obj = new Object()；的语法糖。
5、ES6 中 class 与构造函数的关系？
> class 为构造函数的语法糖，即 class 的本质是构造函数。通过class定义的类和通过构造函数定义的类⼆者本质相同。并且在js执⾏时，会将第⼀种转会为第⼆种执⾏。所以 ES6 class的写法实质就是构造函数。
6、js中⼿写new函数？
> js中的new函数可以⼿写来测试，可以更好的了解new函数的执⾏流程
function newTest (constructFunction){
let obj = {};
obj.__proto__ = constructFunction.prototype;
return function(){
constructFunction.apply(obj,arguments);
return obj;
}
}
⼆、js构造函数详解
⼀、js函数
⾸先弄明⽩何为函数呢，按照犀⽜书的说法，函数简单的说就是重复执⾏的代码块。函数是这样的⼀段JavaScript 代码，它只定义⼀次，但可能被执⾏或调⽤任意次。
函数的定义⽅式：
1.声明式函数定义： function 函数名（）{}；这种定义⽅式，会将函数声明提升到该函数所在作⽤域的最开头，也是就⽆论你在这个函数的最⼩作⽤域的那⼉使⽤这种⽅式声明的函数，在这个作⽤域内，你都可以调⽤这个函数为你所⽤。
2.函数表达式：let fun = function(){}; 此⽅式定义的函数，只能在该作⽤域中，这段赋值代码执⾏之后才能通过fun（）调⽤函数，否则，由于变量声明提升，fun === undefined。
3.new Function 形式： var fun1 = new Function (arg1 , arg2 ,arg3 ,…, argN , body )；Function构造函数所有的参数都是字符串类型。除了最后⼀个参数, 其余的参数都作为⽣成函数的参数即形参。这⾥可以没有参数。最后⼀个参数, 表⽰的是要创建函数的函数体。
总结：1 、第⼀种和第⼆种函数的定义的⽅式其实是第三种new Function 的语法糖，当我们定义函数时候都会通过 new Function 来创建⼀个函数，只是前两种为我们进⾏了封装，我们看不见了⽽已，js 中任意函数都是Function 的实例。2、ECMAScript 定义的函数实际上是功能完整的对象。
⼆、构造函数
定义：通过 new 函数名来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分，主要从功能上进⾏区别的，构造函数的主要功能为初始化对象，特点是和new ⼀起使⽤。new就是在创建对象，从⽆到有，构造函数就是在为初始化的对象添加属性和⽅法。构造函数定义时⾸字母⼤写（规范）。
对new理解：new 申请内存, 创建对象，当调⽤new时，后台会隐式执⾏new Object()创建对象。所以，通过new创建的字符串、数字是引⽤类型，⽽是⾮值类型。
1、常⽤的构造函数：
1. var arr = []; 为 var arr = new Array(); 的语法糖。
2. var obj = {} 为 var obj = new Object(); 的语法糖
3. var date = new Date();
4. ...
2、执⾏构造函数时发⽣的事： let f = new Foo();
function Foo(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
Foo.prototype.belief = function(){
console.log('量变是质变的必要准备，质变是量变积累到⼀定程度的必然结果！');
}
let f = new Foo ('zh',18,'男');
a . let f = {}; //⼀个继承⾃Foo.prototype的新对象被创建。
b. f.__proto__ = Foo.prototype; // f 继承 Foo的原型。
b Foo.call(f,'zh',18,'男'); //执⾏Foo函数，将name,age,sex 参数传⼊Foo中执⾏，此时函数内部this 为 new 创建的 f对象，所以f.name = 'zh';f.age = 18; f.sex = '男'；
c. 实例化对象完成，此时 f = {
name:'zh',
age:18,
sex:'男'
}
d. f.belief(); 打印'量变是质变的必要准备，质变是量变积累到⼀定程度的必然结果！
⼿写new函数
function newTest (constructFunction){
let obj = {};
obj.__proto__ = constructFunction.prototype;
return function(){
constructFunction.apply(obj,arguments);
return obj;
}
}
注意：当构造函数中有返回对象时候，最终new出来的对象会是构造函数的返回值，⽽不是new过程
中⽣成的对象。仅当构造函数返回值是对象时有效，当不是对象时依旧返回new过程中形成的对象（⽆论如何new 构造函数之后都会返回⼀个对象值）。
三、ES6 中 class 与构造函数的关系
class 为构造函数的语法糖，即 class 的本质是构造函数。class的继承 extends 本质为构造函数的原型链的继承。
例如：
类的写法
class Person{ //定义⼀个名字为Person的类
constructor(name,age){ //constructor是⼀个构造⽅法，⽤来接收参数
this.name = name; //this代表实例对象
this.age = age;
}
say(){ //这是⼀个类的⽅法，注意千万不要加上function
return this.name + this.age
}
}
var obj = new Person('⽼铁'，18);
console.log(obj.say());
构造函数的写法
function Person(name,age){ //构造函数和实例化构造名相同且⼤写（⾮强制，但这么写有助于区分构造函数和普通函数）
if(!(this instanceof Person)){ //避免使⽤者不⼩⼼讲Person当作普通函数执⾏
throw new Error(''请使⽤ new Person"); //仿ES6 class 中的写法
}
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
return this.name + this.age
}
var obj = new Person('⽼铁'，18); //通过构造函数创建对象，必须使⽤new运算符
console.log(obj.say());
总结：通过class定义的类和通过构造函数定义的类⼆者本质相同。并且在js执⾏时，会将第⼀种转会为第⼆种执⾏。所以 ES6 class 的写法实质就是构造函数。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论