前端系统化学习【JS篇】:(十六)JS面向对象之构造函数

201 阅读4分钟

前言

  • 细阅此文章大概需要 3分钟\color{red}{3分钟}左右
  • 本篇中讲述了:
      1. 构造函数的作用
      1. 构造函数执行
      1. 构造函数执行到底发生了什么?
      1. 验证某属性是否为当前对象的【私有属性】
          1. in
          1. hasOwnProperty
      1. 验证某个实例是否属于当前类【不止一种】
          1. instanceof
          1. ...
  • 如果有任何问题都可以留言给我,我看到了就会回复,如果我解决不了也可以一起探讨、学习。如果认为有任何错误都还请您不吝赐教,帮我指正,在下万分感谢。希望今后能和大家共同学习、进步。
  • 下一篇会尽快更新,已经写好的文章也会在今后随着理解加深或者加入一些图解而断断续续的进行修改。
  • 如果觉得这篇文章对您有帮助,还请点个赞支持一下,谢谢大家!
  • 欢迎转载,注明出处即可。

JS面向对象之构造函数

  • 在JS中除了内置类,我们还需要使用构造函数来自己定义 “自定义类”,以及创建出 “自定义类”的实例来使用

构造函数执行

  • 在函数执行的时候,使用new来修饰【new func();】,此时函数是作为构造函数来执行
    • 此时这个函数被看作一个自定义类(构造函数)
    • 而且一般返回值被称为当前自定义类的一个实例(有特殊情况)

构造函数执行到底发生了什么?

  • 【为什么new执行可以把函数当作一个类,且返回值是一个实例,new做了什么?】

  1. 构造函数执行也具备普通函数执行的一面

    • (也会像普通函数执行一样去执行【创建私有上下文,初始化作用域链,初始化this,形参赋值,创建私有变量,arguments,变量提升,代码执行...】)
  2. 【特殊之处】在new构造函数执行时,创建私有上下文之后的第一件事情是 “创建一个实例对象【空对象】”

  3. 【特殊之处】接着在初始化THIS时,让私有上下文中的THIS 指向【刚创建的实例对象】

    • 在代码执行时【THIS.xxx = xxx是给【当前实例】设置的 【私有属性】。】
    • prototype(原型),属性值是一个对象,对象当中存储的是当前类供实例调用的公共属性和方法。【可以通过给一个类的原型对象上添加属性或方法,来给实例对象增加公共方法】
  4. 私有上下文中的私有变量和实例对象没有必然的关系,只有THIS.xxx是直接给实例对象添加属性

  5. 即使函数中没有return,也会默认把创建的实例对象返回

    • 如果有return,return返回的是基本类型值,【则默认仍然返回实例对象
    • 如果有return,return返回的是引用类型值,【则以返回的内容为准】
         function func(x,y){
             let total= x+y;
             this.result = total;//只有THIS.xxx是直接给实例对象添加属性
             this.say = function(){};
             return 10;
         }
         let f1 = new func();
          console.log(f1 instanceof func);//true 因为不写return或者return基本类型值都是会默认返回实例对象
    
    

new func() 和 new func的区别

  1. 不加小括号代表着 不带参数执行构造函数【不能传递实参】
  2. 带参数new 优先级是19,不带参数new 优先级是18

验证某属性是否为当前对象的【私有属性】

  1. in:无论是私有还是公有属性,只要是它的属性,结果就是TRUE
  2. hasOwnProperty:只有是他的私有属性,结果才是TRUE】
            function func(x,y){
                let total= x+y;
                this.result = total;
                this.say = function(){};
            }
            let f1 = new func();
            //用in检测
            console.log('say'in f1);//私有属性//true
            console.log('toString'in f1);//公有属性//true
            //用hasOwnProperty检测
            console.log(f1.hasOwnProperty('say'));//私有属性//true
            console.log(f1.hasOwnProperty('toString'));//公有属性//false
    

验证某个实例是否属于当前类【不止一种】

  • instanceof:用来检测某个实例是否属于当前类】
            function func(x,y){
                let total= x+y;
                this.result = total;//只有THIS.xxx是直接给实例对象添加属性
                this.say = function(){};
                return {
                    name:'aaa'
                };
            }
            let f3 = new func();
            console.log(f3 instanceof func);//false,因为返回了自定义的引用类型值,所以构造函数执行的返回值以返回的引用类型值为准