箭头函数与普通函数区别

 JS中的this指向

在浏览器里,在全局范围内this 指向window对象;

      // 在浏览器里,在全局范围内this 指向window对象;
        function fn() {
            console.log(this);//Window {window: Window, self: Window, document: document, name: "呵呵", location: Location, …}
            this.name = "呵呵";//定位全局的this
            console.log(this.fn);//ƒ fn() {}
        }
        fn();// window.fn();

 构造函数中,this指向new出来的那个新的对象;

    function Fn(x) {
            this.x = x//100
            console.log(this);//Fn {}
            console.log(this.x);//100
        }
        let a = new Fn(100)
        console.log(a);//Fn {x: 100}

在函数中,this永远指向最后调用他的那个对象;

     var name = "我是window的name";
        function myobj() {
            var myname = "呵呵";
            console.log(this);
            console.log(this.myname);
        }
        var a = {
            fun: myobj, //将函数myobj 赋值给a.fun
            myname: "我是a的name"
        };
        a.fun();//谁调用这个函数中,this指向调用他的那个对象;

 call、apply、bind都是改变this指向的方法

call

     let fn = function (a, b) {
            console.log(this, a, b);
        }
        let obj = { name: "obj" };
        // fn.call(obj, 1, 2);   // this:obj        a:1          b:2
        // fn.call(null);      // this:null       a:undefined  b:undefined
        // fn.call(undefined); // this:undefined  a:undefined  b:undefine

call()的第一个参数是this要指向的对象,后面传入的是参数列表,参数可以是任意类型,当第一个参数为null、undefined的时候,默认指向window;

apply 

apply():第一个参数是this要指向的对象,第二个参数是数组

        var obj = {}//定义一个空的对象
        function f(x, y) {
            console.log(x, y)
            console.log(this) //this是指obj
        }
        f.apply(obj, [1, 2]) //后面的值需要用[]括起来

 bind不会直接调用用括号调用会返回一个函数不会立即去执行必须再次重新调用才会返回this指向的新方法 

        var x = "window_x";
        var obj = {
            x: "obj_x",
            fn: function (y) {
                console.log(this.x + " ; " + y);
            }
        }
        obj.fn(1);  //obj_x ; 1
        var fn = obj.fn;
        fn(1);  //window_x ; 1
        fn.bind(obj, 1)();  //返回fn方法:f (y){console.log(this.x + " ; " + y);}
        var bfn = fn.bind(obj);
        bfn(1); //obj_x ; 1

箭头函数和普通函数的区别

 箭头函数是匿名函数,不能作为构造函数,不能使用new
 箭头函数没有原型属性
 箭头函数内没有arguments,可以用展开运算符...解决
 箭头函数不能通过call()\apply()\bind()方法直接修改它的this指向 但是,可以正常传参           箭头函数自身没有this,它的this是父级普通函数的this.在普通函数中,this总是指向调用它的对象或者,如果用作构造函数,它指向创建的对象实例。

普通函数的arguments和类数组转换成数组 

   普通函数的arguments

(function(age,name){
	console.log(arguments);		//[23,"XD"]
	console.log(arguments.length);		//2
	console.log(arguments[0]);		//23
	console.log(arguments[1]);		//XD
})(23,"XD");

 类数组转换成数组 

from

        //以下这种方式属性值必须是 0,1,2,3...  并且最后要加上长度length 
        var json = {
            '0': 'hehe',
            '1': '嘿嘿',
            '2': '嘻嘻',
            length: 3
        };
        ["hehe", "嘿嘿", "嘻嘻"]

字符串

该方法也可将字符串转化为数组 
console.log(Array.from('hello'));
// ["h", "e", "l", "l", "o"] 

展开运算符

        var a = [...helloStr];
        console.log(a);
         ["h", "e", "l", "l", "o"] 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值