关于javascript:this与class原型

31次阅读

共计 1295 个字符，预计需要花费 4 分钟才能阅读完成。

class：类，是对象的模板。（或者叫：原型）this：以后对象。以上定义，与 java 中的概念是雷同的。然而，因为 javascript 语言本身的特点，对于 class 与 this，还须要做进一步阐明。
留神：在 javascript 中，在定义类结束之后，还能够再增加属性和办法。
属性与办法增加到 this 上
class Point {

constructor() {}}let p = new Point();

p.username = ‘zhangsan’;
console.log(p.username); //zhangsan
下面代码中，Point 类定义之后，给对象 p 又增加了一个 username 属性。这是齐全能够的。跟单网 www.gendan.com 然而要留神：此种形式，仅仅是给对象 p 增加一个属性，而不是给类增加一个属性。或者说：此种形式，仅仅是给对象 p 的 this 增加一个属性，而不是给类增加一个属性。
class Point {

constructor() {}}let p1 = new Point();

p1.username = ‘zhangsan’;
console.log(p1.username); //zhangsan
let p2 = new Point();
console.log(p2.username); //undefined
下面例子中，只给对象 p1 增加了 username 属性，但没有给类增加属性。所以，p2 对象中并没有 username 属性。
属性与办法增加到类上
class Point {

constructor() {}}

Point.prototype.username = ‘zhangsan’;
let p1 = new Point();
console.log(p1.username); //zhangsan
let p2 = new Point();
console.log(p2.username); //zhangsan
下面代码中，应用 Point.prototype 形式，给类增加属性。这样，类的所有对象（p1、p2）就都有 username 属性了。
在 javascript 中，每一个类都有一个 prototype，它就是类的原型，类的所有实例共享一个原型。如果想拜访这个原型，能够应用 proto 指针。
样例代码：
<!DOCTYPE html><html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        class Point {constructor() {}}
        let p = new Point();
        console.log(p.__proto__);      // 留神 proto 指针的写法
        /**
         * 输入后果：* {constructor: ƒ}
         *  constructor: class Point  // 这里证实：proto 指针指向类的原型
         *  __proto__: Object
         */
    let p1 = new Point();
        let p2 = new Point(); 
        // 这里证实：类的所有实例共享一个原型 
        console.log(p1.__proto__===p2.__proto__);  //true
    </script>
</body></html>

正文完