广州市|广州蓝景分享—关于前端this的学习

广州市|广州蓝景分享—关于前端this的学习


  • 解析器在调用函数时 , 每次都会向函数内部传递一个隐含的参数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);
//windowfn();

上面例子直接执行函数 , 这时的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: '张三'
   fnfn();
// 全局nameobj.fn();
// 阿离王obj2.fn();
// 张三

构造函数
  • 使用new关键词调用的函数 , 是构造函数(constructor)
  • 构造函数是专门用来创建对象的函数
  • 构造函数就是一个普通的函数 ,
  • 不同的是 , 构造函数习惯上函数名首字母大写(不成文规范)
  • 构造函数和普通函数的区别就是调用方式的不同
  • 普通函数是直接调用 , 而构造函数需要使用new关键字来调用
构造函数的执行流程:
  • 【广州市|广州蓝景分享—关于前端this的学习】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';