__x__(63)0925第十天__ JavaScript 函数 上下文对象 原型对象

Posted 2021-01-08 我即狂澜，且力不可挽

解析器在每次调用函数时，都会传递两个隐含参数：

• this    上下文对象
  • 根据函数调用方式的不同，this 指向不同的对象
  • 当作为普通函数调用时，this 指向全局对象 window
  • 当作为对象的方法被调用时，this 指向调用该方法的对象
  • 当作为构造函数调用时，this 指向创建的新对象
  • 构造函数
    • 出现的原因：由于目前为止，我们的对象都是用 new Object() 创建的，所以都是 Object 类的对象，不好区分。。。最好有个 Person 类，Animal 类
    • new Person()只要出现 new 就会在堆内存创建一个对象。
      • 这就是是一个构造函数，习惯上首字母大写。
      • 创建时，和普通函数没什么区别，即 function Person(){} 即可。只是用的时候加了 new 就是构造函数了。
    • 返回值为所建的对象。
    • 使用同一构造函数创建的对象，称为一类对象。。。构造函数称为类。。。创建的对象称为该类的实例。

  • function Person(name,gender,age){
        this.name = name;
        this.gender = gender;
        this.age = age;
        this.sayName = function(){
            document.write("我叫"+this.name);
        };
    }
    
    var ts = new Person("唐僧","男",27);
    ts.sayName();
    
    // 使用 instanceof 可以检查 一个对象是否是某个类的实例
    console.log(ts instanceof Person);    // 当然返回 true
    

    // xxx instanceof Object        永远返回 true ，因为所有对象都是 Object 的派生类

     

  • 由于构造函数没执行一次就会创建一个新的方法，如果执行1000次就会创建1000个方法，这些方法彼此相同。这1000个方法完全可以共用一个方法
    • 解决方法1，在全家作用域中定义方法，再赋予构造函数
    • 上面方法带来的新问题是：污染了全局作用域的命名空间，而且很不安全。
    • 于是，接下来讨论的原型对象，完美解决了这个问题。
• prototype    原型对象
  • 每个函数的 prototype 属性都是唯一的，独立的，互不影响的。
  • 若函数作为普通函数调用，则 prototype 无作用。
  • 以构造函数调用时，对象会隐含prototype 属性，指向该构造函数在堆内存中的原型对象。
  • 不让看，但是可以通过 __proto__ 属性来访问该属性

    • console.log(Person.__proto__ == Person.prototype);    // true

       

  • 相当一个公共区域，同类创建的实例都可以访问到这个原型对象。
  • 原型链
    • 当访问某个 属性或者方法 时，会先在自身寻找，再到 prototype 中寻找， 再到上一级 prototype 中寻找，直到找到 Object 对象。。。如果都没找到，就返回 undefined
  • 我们可以把对象公有的一模一样的属性和方法，编写到 prototype 原型对象中。。。如果实例化的对象有不同，可以直接重写。

    • function MyClass(){
      
      }
      
      MyClass.prototype.a= 123;
      
      var mm = new MyClass();
      var gg = new MyClass();
      
      mm.a = "这是 mm 的 123";
      
      document.write(mm.a);    // "这是 mm 的 123"
      document.write(gg.a);    // 123

  • 所以之前的问题，解决代码是

    • function Person(name,gender,age){
          this.name = name;
          this.gender = gender;
          this.age = age;
      }
      
      Person.prototype.sayName = function(){
              document.write("我叫"+this.name);
          };
      
      var ts = new Person("唐僧","男",27);
      ts.sayName();
      
      // 使用 instanceof 可以检查 一个对象是否是某个类的实例
      console.log(ts instanceof Person);    // 当然返回 true
      // xxx instanceof Object        永远返回 true ，因为所有对象都是 Object 的派生类
      
      // 使用 xxx.hasOwnProperty 可以检查 一个对象本身是否含有某属性
      console.log(Person.hasOwnProperty("name"));    // 当然返回 true