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"]