【面向对象大山】1.关于普通函数和构造函数那点事

Javascript中的面向对象！

随着ES6新语法规范的普及，目前的JS语言已经完全成为一项强大的面向对象编程语言，作为面向对象编程语言中最重要的一环，“类”这个概念让很多JS的初学者十分抓狂，什么是类？（就是class吗？）什么是构造函数（是new Fn()?)想到这里，什么是普通函数都有点懵逼了！后面的几篇博客中，我会带着大家详细深入地了解一下面向对象的概念，从底层原理和经典面试题一起和大家探讨一下JS中面向对象编程的一些规范和技巧！

    今天我们要讨论的话题是：普通函数和构造函数！应该没有人可以忽略这2个概念吧，那么你们真地完全理解
  这2个概念了吗，先看一个非常基础的面试题：

function Fn(x,y){
	this.x=x;
	this.y=y;
	total = x + y;
}
let result = Fn(10,20);
console.log(result);
console.log(x);
console.log(y);

     这题简单呐，答案应该是3个undefined！第一个函数没给返回值，result没意义，这个构造函数当普通函数
     执行了，this没有实例指向，x,y相当于函数执行私有上下文的变量，在全局无法获取，也是undefined。
     能说道这里说明你对函数的执行时有一些基本了解的，这里我们暂不赘述变量提升等机制，只聊普通函数和
     构造函数执行时的异同，本例中Fn作为普通函数执行时，没有指定返回值，是默认返回undefined，因此
     result确实是undefined，看到函数里有this的时候，很多同学总会先入为主的想到构造函数的实例属性，
     this不就是给实例添加私有属性的吗？这里没有new，那这个this就没有意义了呗。但是真地是这样吗？this
     的指向问题你真地有深入想过吗？这里的this是有意义的，它指向什么？指向window！所以这个Fn当普通函数
     执行的时候，会给全局window添加x和y两个属性，当传入实参10和20的时候，全局下window.x和window.y分
     别被赋值了10和20，那么输出的结果还是undefined吗？显然不是，应该是10和20。

很多同学在看到一个函数以大写字母开头，函数体内又出现this的时候总会默认这是一个构造函数，总会先入为主地觉得这个函数就应该是用来new实例的，这是对普通函数和构造函数一知半解的表现。其实普通函数和构造函数没有区别！当然，我的意思说作为一个单纯的函数本身，无论函数命名是否以大写开头，函数里内是否有this，这些不是区分这2个概念的标准，关键在于new 这个关键字，在一个函数前面加了1个new关键字，我们才说这个函数当构造函数来执行了！以此我们看看new这个关键字到底干了些什么？

1. 给一个函数加了new关键字，无论函数Fn后带不带（）小括号，这个函数我们都默认它执行了，这里的小括号是用来传递参数的，当然在执行顺序上也存在一些优先级的区别（带小括号的执行优先级更高）。这里的函数执行跟普通函数执行时类似的，同样形成私有上下文，进行形参赋值，但重点是不同，我们接着看！
2. 当new执行时，浏览器会在构造函数新创建的执行上下文中创建一个新对象（我们常说的实例对象），并且将this指向这个新对象，因此通过this.xxx其实就是给这个实例对象挂载各种私有成员，而与this无关的操作其实跟实例对象没有关系，当做普通函数执行即可，最后，构造函数会默认返回一个出这个实例对象，如果自己手动给出了返回值，除非返回值也是一个对象（更准确的说是引用类型值），那么返回的还是我们常说的实例对象，一般会用一个变量来接受。

上面2点就是new这个关键字在函数执行时的核心原理，了解了这2个机制，再看到一个函数时，你应该不会再被它唬人的样子吓到了吧？了解了这2个机制，如果面试官让你自己手写一个方法_new来实现new的作用原理，是不是也很简单呢？当然这里还需要一些原型链的机制，下一篇文章我会带大家深入了解原型和原型链。文章开头的let result = Fn(10,20)如果在Fn前加了一个new又会是怎样呢？大家这会再思考这个问题相必是很轻松了吧！