VueUI组件封装之this.$name调用方式

Posted 2023-05-05

参考技术A

进行封装全局的IU组件,在任意组件、任意地方都可以操作封装的组件。

js中大小写 敏感 ，所以下面的 TemplateName 和 templatename 并不相同

通过 this.$templatename.show(\'封装的组件显示\'，1000) 任意一个组件让封装的组件显示

例子: 这个例子是在 AnyTemplate 组件的 mounted() 函数中调用，在页面上会想显示 向封装的组件传入的文字

0147 JavaScript创建对象的三种方式 之 构造函数

5.2.3.1 构造函数

• 构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

• 构造函数的封装格式：

  function 构造函数名(形参1,形参2,形参3) {
       this.属性名1 = 参数1;
       this.属性名2 = 参数2;
       this.属性名3 = 参数3;
       this.方法名 = 函数体;
  }
  

• 构造函数的调用格式

  var obj = new 构造函数名(实参1，实参2，实参3)
  

  以上代码中，obj即接收到构造函数创建出来的对象。

• 注意事项

  1. 构造函数约定首字母大写。
  2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
  3. 构造函数中不需要 return 返回结果。
  4. 当我们创建对象的时候，必须用 new 来调用构造函数。

• 其他：构造函数和对象的关系

  【类对象 和 实例化对象 的关系。】

  （1）构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
  （2）创建对象，如 new Stars()，特指某一个。

​ （3）对象实例化：通过 new 关键字创建对象的过程我们也称为对象实例化。

        // 利用构造函数创建对象
        // 我们需要创建四大天王的对象  相同的属性： 名字 年龄 性别  相同的方法： 唱歌
        // 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {}
        // }
        // new 构造函数名();
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        var ldh = new Star(\'刘德华\', 18, \'男\'); // 调用函数返回的是一个对象
        // console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh[\'sex\']);
        ldh.sing(\'冰雨\');

        var zxy = new Star(\'张学友\', 19, \'男\');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing(\'李香兰\')


        // 1. 构造函数名字首字母要大写
        // 2. 我们构造函数不需要return 就可以返回结果
        // 3. 我们调用构造函数 必须使用 new
        // 4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}
        // 5. 我们的属性和方法前面必须添加 this

        // 构造函数和对象
        // 1. 构造函数  明星 泛指的某一大类  它类似于 java 语言里面的  类(class)
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);
            }
        }
        
        // 2. 对象 特指 一个具体的事物 刘德华 ==  {name: "刘德华", age: 18, sex: "男", sing: ƒ}
        var ldh = new Star(\'刘德华\', 18, \'男\'); // 调用函数返回的是一个对象
        console.log(ldh);

        // 3. 我们利用构造函数创建对象的过程我们也称为对象的实例化