用Java语言的方式理解JavaScript中的类的所有属性与方法
发布于 4 年前 作者 qiang68 4162 次浏览 来自 分享

类的所有属性和方法

从代码中理解类的各种属性和方法

/**
 * 声明一个Person 类,首字母大写
 *
 */
function Person(){
    
    //声明一个私有属性,用于默认姓名
    var DEFAULT_NAME = '阿Q'

    //声明一个对象属性,用于实例后的定制
    this.name = DEFAULT_NAME

    //声明一个对象方法,用于实例后的打招呼
    this.sayHi = function (){
        console.log(`大家好,我叫${this.name}`)
    }
}

//声明一个静态属性
Person.GreetTemplate = '我是静态属性'

//声明一个静态方法
Person.staticMehtod = function(){
    console.log('我是一个静态方法。')
}

//声明一个原型属性
Person.prototype.age = '18'

//声明一个原型方法
Person.prototype.selfIntroduction = function(){
    console.log('大家好,我是一个原型方法')
}

调用方式

//静态属性
Person.GreetTemplate

//静态方法
Person.staticMehtod()

//对象方法
var person = new Person()
person.sayHi()

//对象属性
var person = new Person()
person.name

//原型方法
var person = new Person()
person.selfIntroduction()

//原型属性
var person = new Person()
person.age

//私有属性
var person = new Person()
person.DEFAULT_NAME //结果为undefined,编译器直接理解为在对象上增加了一个未定义的属性或方法
Person.DEFAULT_NAME //结果为undefined,编译器直接理解为在类是上增加了一个未定义的静态属性或方法

总结:从上述调用方式中可以简单理解为,静态属性是可以直接访问使用的,而其它的对象方法和属性方法是需要new一个对象出来才可以访问到的,私有属性是只能在类的构造函数中使用,其它地方会被视为新定义的属性或方法。

辨别ES6语法定义的类中的属性和方法

/**
 *用ES6的语法重新定义Person类
 *
 * [@class](/user/class) Person
 */
class Person {

    //声明一个静态属性
    static GreetTemplate = '我是静态属性'

    //声明一个静态方法
    static staticMehtod() {
        console.log('我是一个静态方法。')
    }
    constructor() {

        //声明一个私有属性,用于默认姓名
        let DEFAULT_NAME = 'FlyerUI'

        //声明一个对象属性,用于实例后的定制
        this.name = DEFAULT_NAME

        //声明一个对象方法,用于实例后的打招呼
        this.sayHi = () => {
            console.log(`大家好,我叫${this.name}`)
        }
    }

    //声明一个原型属性
    age = '18'

    //声明一个原型方法
    selfIntroduction() {
        console.log('大家好,我是一个原型方法')
    }

}
回到顶部