胡吹一波js ,箭头函数引发的深思

[当作看不见]

箭头函数和普通函数的区别是什么?
箭头函数绑定了this,普通函数不绑定this

why?
小伙伴们知道箭头函数没有constructor 吗?(构造器),没有prototype 吗? 原型链
这些是什么? 都是面向对象的东东啊 ,没有constructor 就没有办法作为一个对象使用,无法通过 new 关键字去构造一个实例,自然js基于原型链的继承也就无意义,prototype就可以扔掉了,那么this 就自然而然的绑定了作用域,也就不会产生奇奇怪怪的问题,表现就很单纯.

问题来了,有哪个小伙伴想过之前为什么让人痛苦万分的function是什么鬼吗?

来来来听我胡吹一波.
function 是js 里面的函数,也是class,对象,问题就是坏在这里了,在绝大数时候,我们想要的只是一个单纯的函数,但是人家有constructor ,只要function里面包含了this ,即使没有使用new 关键字去声明对象,也会改变this的指向,可以理解为是一个副作用,
当我想使用纯对象的时候,又得防止被当做函数调用,宝宝心中苦啊,下面小伙伴说:"使用安全模式啊" ,嗯,在不使用apply,call,bind 这些强制改变this 的,玩意儿的前提下,安全模式是有效的,自然说了前提,那就是不怎么安全. 所以想来想去诶,我给你们一个新的属性值new.target用着,嘿嘿,这个终于没有什么副作用了,大家都以为这个是新的语法,NonoNo,那只是对于开发来说,其实有很多方法就是这样实现的..

下面我举个栗子

例如 var a = document.getElementById; a('aa'); 获取Id为aa 的元素,报错了,为啥子腻,由于获取元素必须是dom 才能使用的方法,这里赋值实际上就改到window 上面去了, getElementById 是document的方法 ,赋值给window.a . window.a === document.getElementById ,当前this,绑定的就是window,不行so 错啦..

好了就这样瞎扯了,其实函数闭包也是让人感觉很坑爹的,下次再写,

纯属个人胡吹,愿意拍砖的,一起聊聊嘛.

[圈圈_叉叉]

大佬。。。js原型链还是不太懂呀

[Bryant丶]

[madatou]

谢谢楼主分享

[qq_42719014]

谢谢楼主分享

[先生不吃锅巴]

[eyeslin]

[clark_kidd]

只有call 和 var This=this;能解决这个问题

[weixin_42743809]

谢谢楼主分享

[前端弓箭手]

假如只有箭头函数：js是最低级的语言！不！js称不上一门语言！ 有了function：真香！

[野狼sky]

js已经越来越像后台语言了

[漠子凉]

var b = {}
b.bb = function() {
	console.log(this)
}

a = b.bb

a() // 打印window
// 这里的a赋值只是把函数的值给弄过来，并没有说他的this就指向b
// 一个很简单的道理就是引用传递和值传递

[噔本噔]

当作看不见当作看不见

[weixin_42841188]

学习学习学习学习学习

[NANU-NANA]

还不结帖，是在等我么？

[wan971shi]

我来水一波，看有没有币领

[qq_43060399]

我就默默地看着大佬们的发言

[dogel]

你可以选择这样写. function a(id){document.getElementById(id)} a('aa') 我只是一个学php的不喜勿喷..

[qq_37209000]

我是一个反对箭头函数的人.

function f1() {
                console.log('f1');
            }

            var f2 = function () {
                console.log('f2')
            }

            var f3 = f1;
            f3();
            console.log(f3);
            var f4 = f1();
            /* f4(); */
            console.log(f4);

            var f5 = f2;
            f5();
            console.log(f5);
            var f6 = f2();
            /* f6(); */
            console.log(f6);

            (
                f1
            );

            (
                f1()
            );

[啤酒沫]

Interesting 受到了启发写一个单例模式。 以往的单例模式都无法禁止通过new来创建实例，所以很难说是彻底的到哪里。那么看看下面内容：

const A=()=>{};
A.prototype={
    constructor:function(){
        this.a=1;
    }
};
A.getInstance=()=>{
    if(this.instanceA===undefined){
        this.instanceA=Object.create(A.prototype);
        A.prototype.constructor.call(this.instanceA);
    }
    return this.instanceA;
}

> aa=A.getInstance() < constructor {a: 1} > bb=A.getInstance() < constructor {a: 1} > aa===bb < true > cc=new A() VM3645:1 Uncaught TypeError: A is not a constructor at <anonymous>:1:1

[啤酒沫]

为了不污染global，修改了一下：

const A=(function(){
    return {
        fn:function(){
            const A=()=>{};
            A.prototype={
                constructor:function(){
                    this.a=1;
                }
            };
            A.getInstance=()=>{
                if(this.instanceA===undefined){
                    this.instanceA=Object.create(A.prototype);
                    A.prototype.constructor.call(this.instanceA);
                }
                return this.instanceA;
            }
            return A;
        }
    }.fn();
})();