fn() 和 new fn() 的区别

作者: 前端架构师陈龙威 | 来源:发表于2020-03-24 17:15 被阅读0次

fn() 和 new fn() 的区别
函数，构造函数，函数对象与实例对象
函数与构造函数的区别
js 基础知识问答
JS高级基础知识考试
函数
JS高级基础知识总结
new操作后都经历了什么
js笔记三十二之构造函数模式扩展
this_原型链_继承

参考资料：https://www.jianshu.com/p/1cf33ef0bc35

javascript调用方法常用的有2种：fn() 和 new fn();

fn(): 直接走的方法函数中的call()方法

function fn() {
    this.a = 1;
}
fn(); // window.a = 1; a = 1;

// 我们直接调用fn()，那么我们能获取到window.a = 1，即你在浏览器中console.log(a)就能获得1
// 如果我们调用new fn()，那么我们无法获取到window.a = 1，即你在浏览器中console.log(a)只能获得undefined
// 这是因为new fn()将值绑定到了对象上，但是我们这边没有赋予对象，所以找不到该值

new fn(): 走的方法函数中的construct构造方法

function fn() {
    this.a = 1;
}
let b = new fn(); // b.a = 1;
// 但window.b.a 会报错，提示：VM98:1 Uncaught TypeError: Cannot read property 'a' of undefined，原因不知
// new fn()走的是construct构造方法

总结：

fn()是将方法直接渲染到了window上，里面的this指向window；new fn()是将方法渲染到了该函数的新对象上，里面的this指向被赋予对象的值上。
另外，fn()属于直接调用，new fn()属于new对象。

实际用处：

主要用于防治变量污染或者函数污染，多见于插件中，比如swiper，jquery等。

// es5中判断函数是否直接调用还是new方法调用
function judge() {
    if (this instanceof judge) {
        console.log('new方法调用')
    } else {
        console.log('直接调用')
    }
}

// es6中判断函数是否直接调用还是new方法调用
function judge2() {
    if (new.target == judge2) {
        console.log('new方法调用')
    } else {
        console.log('直接调用')
    }
}

// 运用--始终用new方法调用，
function outputFn(cnName, enName) {
    if (this instanceof outputFn) {
        this.name = 'outputFn';
        this.chineseName = cnName;
        this.enName = enName
        this.sayName = function(diyName) {
            return diyName;
        }
    } else {
        return new outputFn(cnName, enName)
    }
}
let o = outputFn('输出方法', 'optFn');
o.name; // outputFn
o.chineseName; // ’输出方法'
chineseName; // undefined
outputFn('输出方法2', 'optFn2').sayName('自定义名称'); // '自定义名称'

// jquery 中是初始化也是类似如此操作，将变量和方法私有化，防止挂在到全局上，
// 一般插件都有类似要求，es5中变量私有化我不太清楚怎么写，es6的变量私有化基本上就是一个new，
// 如果你想在调用初始化方法之后将之暴露到全局，那么可以在初始化方法中设置下