js的面向对象总结

之前看过js高程3，但又有些忘计了，想想我以前写的js代码全是过程化，确实要换一种编程风格了。
大多数编程语言如php,java,c#,ts的面向对象都是

类->实例

但js却不是这样，js不区分类和实例，或者可以说js没有这种类的这种概念，只是通过原型来模拟一种面向对象编程。
在通过原型实现面向对象之前，要了解一个属性，_proto__,所有对象都会在其内部初始化一个属性，就是proto，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去proto里找这个属性，当然proto本身也一个对象 ，所有如果属性还找到就会继续找，直到找到object对象。
一、直接确定proto属性

var Person={
    name:'zcj',
    height:1.2,
    code:function(){
        console.log(this.name+"is code js");
    }
}
var zcj={
    name:'zcj'
}
zcj.__proto__=Person;
zcj.code()

上例代码原型链如下，具体也可以想像成zcj.code属性查找链条(根据这个规则一级一级往上找直到找到object这就叫原型链)。

zcj->zcj.__proto__(Person)->Person.__proto__(Object.prototype)->Object.prototype.__proto__(null)

验证一下

//结果为null
console.log(zcj.__proto__.__proto__.__proto__)

首先来看一张原型神图

二、通过new关键字来确定proto属性
不写new，这就是一个普通函数，它返回undefined。但是，如果写了new，返回当前方法体内的this，也就是说，不需要在最后写return this,并且这个this的proto属性指向的是构造函数的prototype属性，
1.不写return返回的是Person函数体内的this,写了return返回return之前的this,如下所示加了return返回的this少了hello属性

function Person(name){
    this.name=name;
    this.obj={};
    //return 'hhhh'
    this.hello=function(){
        console.log('Hello,'+this.name+'!') 
    }
}
var zcj=new Person('zcj');
console.log(zcj);
console.log(zjc.__proto__);

最好把属性和方法放到Person.prototype中，如果我们通过new Person()创建了很多对象，这些对象的hello函数实际上只需要共享同一个函数就可以了，这样可以节省很多内存。

function Person(name){
    this.name=name;
    this.obj={};
    //return 'hhhh'
}
Person.prototype.hello=function(){
    console.log('Hello,'+this.name+'!') 
}
var zcj=new Person('zcj');
console.log(zcj);

利用js的原型来实现类的继承特性

function Student(proto){
    this.name=proto.name||'unNamed';
}
function PrimaryStudent(proto){
    //调用student函数把被调用函数的this等于调用函数体的this
    Student.call(this,proto)
    this.grade=proto.grade||1;
}
function F(){

}
F.prototype=Student.prototype;
PrimaryStudent.prototype=new F();
//强加一个constuctor属性指向primarystudent
PrimaryStudent.prototype.constructor=PrimaryStudent
PrimaryStudent.prototype.getGride=function(){
    return this.grade;
}
var zcj=new PrimaryStudent({
    name:'小明',
    grade:2
});
console.log(zcj)

zcj对象的原型链

zcj.__proto__(Primarystudent.prototype)->Primarystudent.prototype.__proto__(F.prototype(Student.prototype))->F.prototype(Student.prototype).__proto__->Object.prototype.__proto->null

嗯，很麻烦是吧，好了大神都知道了，es6己经支持class关键字了啊，利用es6的class来实现，ES6引入的class和原有的JavaScript原型继承有什么区别呢？实际上它们没有任何区别，class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之，用class的好处就是极大地简化了原型链代码，google是支持的，其他浏览器不支持的话就可以用一些编译工具，如babel