js的面向对象总结

素颜马尾好姑娘i 2022-05-31 22:55 173阅读 0赞

之前看过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__)

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

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

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

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

[SouthEast]: /images/20220601/57ceadd1d4a14495a6ce0d22fc7cf8e8.png