js 高级 prototype

左手的ㄟ右手 2023-01-09 15:37 118阅读 0赞

function Person(uname, age) { 
         this.uname = uname;
         this.sing = function() { 
         console.log('我会唱歌');
        }
    }
    var person1 = new Person('wang', 18);
    var person2 = new Person('wei', 18);
    person1.sing();//我会唱歌
    person2.sing();//我会唱歌

这里`person1`和`person2`分别复制了方法类的`sing`方法,造成了浪费.(不同于其他语言),javascript通过`prototype`来实现其他语言的面想对象,多个实例共享一个方法.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsYXJvamE_size_16_color_FFFFFF_t_70_pic_center]

function Person(uname, age) { 
         this.uname = uname;
    }
    Person.prototype.sing = function() { 
        console.log('我会唱歌');
    }
    var person1 = new Person('wang', 18);
    var person2 = new Person('wei', 18);
    //两个方法的sing都是调用prototype.sing
    person1.sing();//我会唱歌
    person2.sing();//我会唱歌

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsYXJvamE_size_16_color_FFFFFF_t_70_pic_center 1]

类方法有`prototype`,而对象方法中有`__proto__`,二者是等价的

person1.__proto__ === Persion.prototype;

对象都会有一个属性 `__proto__` 指向构造函数的 `prototype` 原型对象，之所以我们对象可以使用构造函数 `prototype` 原型对象的属性和方法，就是因为对象有 `__proto__` 原型的存在。

注意:直接用类函数增加的属性,只能通过类函数来访问

Star.sex = '男';

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsYXJvamE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/87c66b222051414581380936bb9ad185.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsYXJvamE_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/557e3685daab47e5b670071e15bca656.png