javascript E5面向对象和 E6面向对象

2018-12-17 10:47:41来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

javascript es6之前的面向对象方法:

一般使用构造函数来实现

function Person (name, age) {
    this.name = name;
    this.age = age;
}
// 实现静态属性, into属性就是静态属性 因为它是用Person直接 . 属性名的
Person.into = 'abc'
// 然后new 一个实例出来
var p1 = new Person('李明', 22);
console.log(p1) 
console.log(Person.into)

可以看到浏览器的控制台已经出来结果了;

只是一些简单的实例;

下面是通过ES6的class 类来创建

class Anything{
    // ES6通过constructor()方法 ,构造器来实现
    constructor(name, age){
        // 实例属性
        this.name = name;
        this.age = age;
    }
    // 静态属性通过 static 来创建静态属性;
    static into = 'compare'
}
const a1 = new Anything('car', 5);
console.log(a1);
console.log(Anything.into);

export default Anything;

 

 

看看打印的结果

结果和上面用构造函数创建的是一样的;当然里面也可以写方法 function;

可用原型对象来创建:

Person.prototype.sayName = function(){

    console.log('这是 Person函数的实例方法');

}

可以通过 p1.sayName(); 直接调用;

那么用class 创建的Anything 类 创建实例方法

直接在Anything 对象里面 和 构造器constructor 平级 直接写: 例如

someone(){

     console.log('这是Anything的实例方法 ');

}

可以直接通过 a1.someon(); 调用;

// 总结

1、用构造函数本身 直接 点 ? 上的 属性或者 function() 函数 叫静态属性或方法; 一般不会这样做;

2、用构造函数加原型对象 点 ? 上的 function() 方法 是实例方法; 可以被调用

3、ES6 class 类 本身只是语法糖 ,只是和之前写法不一样

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:《JavaScript高级程序设计》笔记:函数表达式(七)

下一篇:querySelector与getElementBy等的区别