实例成员和动态成员

实例成员

实例成员：通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。

<script>
        // 1.实例成员，就是实例对象上的属性和方法; (只有实例对象能够调用)
        function Student(username, age) {
      // 构造函数内部的 this 就是实例对象
    // 实例对象中动态添加属性
            this.username = username;
            this.age = age;
        // 实例对象动态添加方法
            this.study = function () {
                console.log('学习');
            }
        }
        // 实例对象上的属性和方法，属于实例成员
       // s1 实际就是 构造函数内部的 this
        const s1 = new Student('张三', 18);
        console.log(s1.username, s1.age);// 访问实例属性
        s1.study(); // 调用实例方法
        // 构造函数，不能调用实例成员
        // console.log(Student.username, Student.age);
        // Student.study();
</script>

总结：

1. 构造函数内部 this 实际上就是实例对象，为其动态添加的属性和方法即为实例成员

2. 为构造函数传入参数，动态创建结构相同但值不同的对象

注：构造函数创建的实例对象彼此独立互不影响。

静态成员

静态成员：构造函数上的属性和方法  

<script>
  // 构造函数
  function Person(name, age) {
    // 省略实例成员
  }
  // 静态属性
  Person.eyes = 2
  Person.arms = 2
  // 静态方法
  Person.walk = function () {
    console.log('^_^人都会走路...')
    // this 指向 Person
    console.log(this.eyes)
  }
</script>

 

总结：

1. 静态成员指的是添加到构造函数本身的属性和方法

2. 一般公共特征的属性或方法静态成员设置为静态成员

3. 静态成员方法中的 this 指向构造函数本身

 

实例化过程

 

1. 创建新空对象

2. 构造函数this指向新对象

3. 执行构造函数代码

4. 返回新对象 构造函数里面不需要写return

prototype属性

prototype属性构造函数上的一个属性，这个属性默认是一个对象;

特点: 所有这个构造函数创建出来的实例对象，都可以访问 prototype属性 上的值;

所有构造函数上都有一个 prototype属性 这个属性默认是一个对象;

普通的静态成员，实例对象无法直接调用;

原型中的this指向

普通的函数，this指向函数的调用者;

1. 构造函数中的this指向 - 实例对象;

2. prototype中的this指向 - 实例对象; (重点)

<script>
        //  普通的函数，this指向函数的调用者;
        // 1. 构造函数中的this指向 - 实例对象;
        // 2. prototype中的this指向 - 实例对象; (重点) 

        // 构造函数的属性绑定写到构造函数中
        function Star(name, age) {
            this.name = name;
            this.age = age;
        }
        // 构造函数中的方法绑定，写到 prototype 上;
        Star.prototype.sing = function (song) {
            // 注意: 原型方法中的this，指向的不是原型，而是实例对象;
            console.log(this);
            console.log(this.name + '唱歌 - ' + song);
        }
        
        // 创建实例对象
        const ldh = new Star('刘德华', 18);
        ldh.sing('冰雨');

        // 创建实例对象
        const zxy = new Star('张学友', 20);
        zxy.sing('吻别');

    </script>

constructor应用

 

1. 构造函数可以通过 prototype 属性找到原型对象;

2. 原型对象上有一个属性 constructor ，可以找到构造函数

3. 作用 - 能够让实例对象，找到构造函数;

4. 通过实例对象，可以找到他的构造函数

 

<script>
        // 1. 构造函数可以通过 prototype 属性找到原型对象;
        // 2. 原型对象上有一个属性 constructor ，可以找到构造函数;
        function Star(name, age) {
            this.name = name;
            this.age = age;
        }
        // 作用 - 能够让实例对象，找到构造函数;
        console.log(Star.prototype);
        const s1 = new Star('刘德华', 18);
        console.log(s1);
        console.log(s1.constructor);
        // 通过实例对象，可以找到他的构造函数
        const s2 = new s1.constructor('张学友', 20);
        console.log(s2);
        console.log(s2.constructor);
    </script>

<script>
        // 定义一个构造函数
        function Star(name, age) {
            this.name = name;
            this.age = age;
        }
        // 构造函数真正的使用场景
        Star.prototype = {
            // 定义构造函数的属性
            // constructor: Star,
            // 不能用箭头函数; 箭头函数就不会指向实例对象了
            sing: function () { console.log('唱歌') },
            dance: function () { console.log('跳舞') }
        }
        // 给原型对象中,添加构造函数; - 后面继承的时候要用;
        Star.prototype.constructor = Star;
        // 实例
        const s1 = new Star('刘德华', 18);
        s1.sing();
        console.log(s1.constructor);
        // 注意: 如果我们用一个对象,覆盖了构造函数的原型,不要忘记修改原型中的constructor指向;
    </script>

原型链