JavaScript面向对象（一）

JS中关于对象的创建方法非常多，使用非常方便，不过也有需要注意的地方，比如方法的创建，原型链的使用等，以下总结了几种创建对象的方法。

方法一：无构造器的对象，只有简单的属性，方法

这种方法比较简略，没有构造器，不能实例化，看起来就像JSON数据，事实上JSON也就是特殊的JS对象。

Person={
  name:"Tom",
  age:10,
  //方法
  eat:function () {
    console.log("eat....");
  }
};
//方法
Person.hi=function () {
  console.log("h1......")
};
//方法，可以直接类名调用
Person.hi();
Person.eat();
//此时不能构造对象，异常TypeError: Person is not a constructor
var p1=new Person();

方法二、函数构造器构造对象，灵活多样

使用函数构造器创建类，可以实例化类，更符合面向对象的特点，不过和其他面向对象语言不同的是，JS的对象自己也可以创建自己的方法

Demo1
简单的构造器使用

function Person(name,age) {
  //this指向当前对象，没有对象指向浏览器窗口
  this.name=name;
  this.age=age;
  word="你好";
  //普通方法,使用对象调用
  this.hello=function () {
    console.log("hello "+word+"我的名字是"+name);
  }
}
//实例化对象，两个参数，此处参入可以为空
var p1=new Person("Tom",19);
//使用对象调用普通方法，无法使用类名调用
p1.hello();
//类和实例化的对象
console.log(Person);
console.log(p1);
//调用对象变量
console.log(p1.name);
//类名无法调用变量,name属性返回类名
console.log(Person.name);
console.log(Person.age);

//对象可以自己增加方法和变量
p1.show=function () {
  console.log("show...")
};
p1.show();

//word无法被访问到，似乎就相当于函数的变量
console.log(Person.prototype.word);
console.log(Person.word);
console.log(p1.word);

hello 你好我的名字是Tom
[Function: Person]
Person { name: 'Tom', age: 19, hello: [Function] }
Tom
Person
undefined
show...
undefined
undefined
undefined

Demo2
在Demo1的基础上进行了类方法和普通方法的扩展

//此时创建的是类方法，只可以通过类名调用
Person.show=function () {
  console.log("Show.....")
};
//通过原型链创建的普通方法，使用对象调用
Person.prototype.ha=function () {
  console.log("Ha.....");
};
var p1=new Person("Tom",19);
//使用对象调用普通方法，无法使用类名调用
Person.show();
p1.ha();

方法三、ES6中class创建对象

ES6中提供了class关键字，使JS对象创建更加贴合面向对象，并且提供了构造器函数，但是不支持在类中添加静态属性，需要自己在类外添加。
其他原有特性不变。

class Person {
    constructor(names,age,word){
        this.names=names;
        this.age=age;
        console.log("name:"+names+" age:"+age+" word:"+word)
    }
    disPlay(){
        console.log("name:"+this.names+" age:"+this.age+" word:"+this.word)
    }
}
Person.prototype.word="ES";
var p=new Person("jack",10,"ES6面向对象");
p.disPlay();

name:jack age:10 word:ES6面向对象
name:jack age:10 word:ES

这两个类有什么不同呢，找找看吧，吼吼吼

class Person {
    constructor(names,age,word){
        this.names=names;
        this.age=age;
        console.log("name:"+names+" age:"+age+" word:"+word)
    }
    disPlay(){
        console.log("name:"+this.names+" age:"+this.age+" word:"+Person.word)
    }
}
Person.word="SSS";
Person.prototype.word="ES";
var p=new Person("jack",10,"ES6面向对象");
p.disPlay();

name:jack age:10 word:ES6面向对象
name:jack age:10 word:SSS