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

当作看不见 2018-07-04 07:34:45
加精
箭头函数和普通函数的区别是什么?
箭头函数绑定了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 错啦..

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

纯属个人胡吹,愿意拍砖的,一起聊聊嘛.
...全文
5016 38 打赏 收藏 转发到动态 举报
写回复
用AI写文章
38 条回复
切换为时间正序
请发表友善的回复…
发表回复
啤酒沫 2018-11-22
  • 打赏
  • 举报
回复
为了不污染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();
})();
啤酒沫 2018-11-22
  • 打赏
  • 举报
回复
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
qq_37209000 2018-10-29
  • 打赏
  • 举报
回复
我是一个反对箭头函数的人.
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()
            );
dogel 2018-08-27
  • 打赏
  • 举报
回复
你可以选择这样写. function a(id){document.getElementById(id)} a('aa') 我只是一个学php的不喜勿喷..
qq_43060399 2018-08-25
  • 打赏
  • 举报
回复
我就默默地看着大佬们的发言
wan971shi 2018-08-22
  • 打赏
  • 举报
回复
我来水一波,看有没有币领
NANU-NANA 2018-08-22
  • 打赏
  • 举报
回复
还不结帖,是在等我么?
weixin_42841188 2018-07-31
  • 打赏
  • 举报
回复
学习学习学习学习学习
噔本噔 2018-07-30
  • 打赏
  • 举报
回复
当作看不见当作看不见
漠子凉 2018-07-24
  • 打赏
  • 举报
回复

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

a = b.bb

a() // 打印window
// 这里的a赋值只是把函数的值给弄过来,并没有说他的this就指向b
// 一个很简单的道理就是引用传递和值传递
野狼sky 2018-07-24
  • 打赏
  • 举报
回复
js已经越来越像后台语言了
前端弓箭手 2018-07-21
  • 打赏
  • 举报
回复
假如只有箭头函数:js是最低级的语言!不!js称不上一门语言! 有了function:真香!
weixin_42743809 2018-07-20
  • 打赏
  • 举报
回复
谢谢楼主分享
clark_kidd 2018-07-19
  • 打赏
  • 举报
回复
只有call 和 var This=this;能解决这个问题
eyeslin 2018-07-19
  • 打赏
  • 举报
回复
先生不吃锅巴 2018-07-19
  • 打赏
  • 举报
回复
qq_42719014 2018-07-17
  • 打赏
  • 举报
回复
谢谢楼主分享
madatou 2018-07-16
  • 打赏
  • 举报
回复
谢谢楼主分享
Bryant丶 2018-07-16
  • 打赏
  • 举报
回复
圈圈_叉叉 2018-07-12
  • 打赏
  • 举报
回复
大佬。。。js原型链还是不太懂呀
加载更多回复(18)

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧