JavaScript学习笔记——this

tech2023-09-18  97

简介

解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this this指向的是一个对象,这个对象我们称为函数执行的上下文对象

根据函数的调用方式的不同,this会指向不同的对象:

以函数的形式调用时,this永远都是window。比如fun();相当于window.fun();以方法的形式调用时,this是调用方法的那个对象以构造函数的形式调用时,this是新创建的那个对象使用call和apply调用时,this是指定的那个对象

实例一:

function fun() { console.log(this); console.log(this.name); }var obj1 = { name: "smyh", sayName: fun };var obj2 = { name: "vae", sayName: fun };var name = "全局的name属性"; fun(); //以函数形式调用,this是window //fun()可以理解成 window.fun()

所以上例中this指的是window对象,所以window.name指的是全局变量中的name

实例二:

function fun() { console.log(this); console.log(this.name); } var obj1 = { name: "js", sayName: fun }; var obj2 = { name: "vue", sayName: fun }; var name = "全局的name属性"; //以方法的形式调用,this是调用方法的对象 obj2.sayName();

this指的是obj2,所以this.name指的是obj2.name

箭头函数中this的指向

ES6中的箭头函数并不会使用上面四条标准的绑定规则,而是会继承外层函数调用的this绑定(无论this绑定到什么)

类数组 arguments

在调用函数时,浏览器每次都会传递进两个隐含的参数

函数的上下文对象 this封装实参的对象 arguments function foo() { console.log(arguments); console.log(typeof arguments); } foo(1,22,333);

arguments是一个类数组对象,它可以通过索引来操作数据,也可以获取长度

arguments代表的是实参。

在调用函数时,我们所传递的实参都会在arguments中保存

arguments只在函数中使用

arguments.length

arguments.length可以用来获取实参的长度

fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b) { console.log(arguments); console.log(fn.length); //获取形参的个数 console.log(arguments.length); //获取实参的个数 console.log("----------------"); }

即使不定义形参,也可以通过arguments来使用实参 可以通过arguments[]来获取单个实参的值: arguments[0]代表第一个实参,arguments[1]代表第二个实参…以此类推

arguments.callee

arguments里边有一个属性叫做callee,这个属性对应一个函数对象,就是当前正在指向的函数对象

fn(2,4); function fn() { console.log(arguments.callee); var test = "学习了吗"; }

在使用函数递归调用时,推荐使用arguments.callee代替函数名本身

arguments可以修改元素

之所以说arguments是伪数组,是因为:arguments可以修改元素,但不能改变数组的长短

fn(2,4); function fn() { arguments[0] = 8; //修改第一个实参为8 console.log(arguments); arguments.push(8); //报错,不可以添加元素 }

改变this的指向

call/apply 通过call/apply可以使得在调用函数的时候修改this指向

fn.call(teacher) student.like.call(teacher,"唱","跳","rap") //有参数传递,一次按顺序传入 fn.apply(teacher) student.like.apply(teacher,["唱","跳","rap"]) //有参数传递,参数以数组的形式传入

bind改变this指向

var teacher = { name : "老师" } var student = { name : "学生", like:function(){ console.log(this.name + "喜欢打篮球"); }.bind(teacher) //this绑定到teacher } var fn = function () { console.log(this); console.log(this.name + "喜欢打篮球"); for (let i = 0; i < arguments.length; i++) { console.log(this.name + "喜欢" + arguments[i]); } }.bind(student) //绑定到student student.like(); console.log("-----------"); fn("唱","跳","rap");

箭头函数中this的指向: ES6中的箭头函数并不会使用上面四条标准的绑定规则,而是会继承外层函数调用的this绑定(无论this绑定到什么)

最新回复(0)