js面向对象

来源:互联网 发布:mac u盘不能拷贝 编辑:程序博客网 时间:2024/05/22 12:27

在大多数语言中,类和实例是面向对象的基本概念,通过创建类来实现函数的封装和继承。然而在JavaScript里面一切数据都可以看成对象,没有类这个概念,在js实现面向对象是依靠原型(prototype)。

创建对象

如果要创建一个对象,首先定义一个构造函数:

function Cat(name){    this.name=name    this.run=function(){    alert(this.name+"is running!")  }}
构造函数就是一个普通的函数,但是在js中,可以调用new关键字来调用:

var kitty=new Cat("kitty");
kitty.name; //kitty
kitty.run(); // kitty ins running!
如果在调用的时候不写new的话,他就是普通的函数,返回的是undefine,如果用了new他就变成了构造函数,它绑定的this指向新创建的对象也就是kitty,返回的是this。

它的原型链是:kitty---->Cat.prototype---->Object.prototype----->null

js在查找对象的属性时会沿着原型链查找,最后到Object.prototype,如果再没有的话,就返回null。如果使用了new创建一个对象,那么原函数Cat就会有一个prototype属性,代表了所有创建的对象,例如我们创建了A,B,C和kitty这四只猫,那么有:

a === Cat.protype //trueb === Cat.protype //truec === Cat.prototype // truekitty === Cat.protype //true

利用这个属性,我们可以优化一下代码。

因为每一个new的对象都是不同的,它们使用不一样的内存,如果创建的对象太多的话就会影响网站的性能。但是里面的函数run()都是一样的,我们可以修改代码把run()单独拿出来存储在它们共同的原型Cat.prototype上,这种方法可以节省大量的内存:

function Cat(name){    this.name=name;}Cat.prototype.run=function(){    alert(this.name+"is running!")}

每个对象A,B,C也会有一个constructor属性,这个属性就是创建这个对象的构造函数:

A.construct // CatB.constructor // Cat


原型继承

ES6新引进了一个关键字class,可以很方便的定义类:

class Animal {    constructor(name) {        this.name = name;    }    run() {        alert(this.name + 'is running');    }}

这里的hello函数不用function定义。

要继承函数就使用extends关键字:

class Bird extends Animal {    constructor(name) {        super(name); // 记得用super调用父类的构造方法!            }    fly() {        alert(this.name+ 'is flying');    }}
这里也要使用class定义,extends表示类是从哪里继承的。现在Bird既可以run,也可以fly了。class关键字是新引入的,不是所有的浏览器都支持。




原创粉丝点击