this的学习
广州蓝景吧
全部回复
仅看楼主
level 9
解析器在调用函数时,每次都会向函数内部传递一个隐含的参数this,
这个隐含参数就是this, this指向的是一个对象,
这个对象我们称为函数执行的上下文对象
根据函数的调用方式的不同,this会指向不同的对象
1.以函数的形式调用时,this指向的是window
2.以方法的形式调用时,this就是调用方法的那个对象
3.当以构造函数的形式调用时,this就是新创建的那个对象
4.使用call()和apply()调用时,this就是call()和apply()第一个参数的对象
5.使用bind()()调用时,this就是bind()第一个参数的对象
*this 永远指向最后调用它的那个对象**
functionfn(){ console.log(this);//window}fn();
上面例子直接执行函数,这时的this指向window
下面再来个例子:
function fn(){ console.log(this);}let obj = { name: '阿离王', fn: fn,};obj.fn();
这时上面的例子打印的this 指向 obj对象了
let name = '全局name';function fn(){ console.log(this.name);}let obj = { name: '阿离王', fn:fn};let obj2 = { name: '张三', fn}fn(); // 全局nameobj.fn(); // 阿离王obj2.fn(); // 张三构造函数
使用new关键词调用的函数,是构造函数(constructor)
构造函数是专门用来创建对象的函数
构造函数就是一个普通的函数,
不同的是,构造函数习惯上函数名首字母大写(不成文规范)
构造函数和普通函数的区别就是调用方式的不同
普通函数是直接调用,而构造函数需要使用new关键字来调用
构造函数的执行流程:
1.立刻创建一个新的对象(在内存开辟一个新空间)
2.将新建的对象设置为函数中的this的指向新建的对象,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类
我们将通过一个构造函数创建的对象,称为是该类的实例, new 一个构造函数,我们称为实例化一个对象出来
function Person(name, age){ this.name = name; this.age = age; this.sayName = function(){ console.log(this.name); }}let per = new Person('阿离王', 28);let per1 = new Person('张三', 20);let per2 = new Person('李四', 19);console.log(per);console.log(per1);console.log(per2.sayName());function Dog(){}let dog = new Dog();console.log(dog);call() 和 apply()
这两个方法都是函数对象的方法,需要通过函数来调用
当对函数调用call()和apply()都也会调用原函数
在调用call()和apply()时,第一个参数为一个对象 此时这个对象将会成为函数执行时的this
function fn(a, b){ console.log(a, b); console.log(this);}let obj = {name: 'yu'};fn.call(obj, 1, 2);fn.apply(obj, [3, 4]);let obj2 = { name: '阿离王', sayName: function(){ console.log(this.name); }}let obj3 = {name: 'obj3'}obj2.sayName.call(obj3);bind()
bind() 是创建一个新的函数,我们必须要手动去调用:
所以得写成bind()()
function fn(a, b){ console.log(a, b); console.log(this);}let obj = {name: 'yu'};fn.call(obj, 1, 2);fn.apply(obj, [3, 4]);fn.bind(obj, 5, 6)();
点击参考 this call() apply() bind()的详细介绍
2020年11月19日 08点11分 1
1