JS面向对象编程--过程式分析

why_rookie 发布于2019-08-22 11:07 / 2686人阅读

摘要：开扒但是，没有类的概念，是构造函数和原型链的方式来体现的。福利原型链图示网上找的，看懂即可跳过上述内容该图把原型和构造函数间的关系理的很清楚，可在浏览器的运行并查看对象下原型间的关系。

声明：

概念性介绍会简单穿插，以过程式分析问题为主，便于提高实践的意义。

前言：

面向对象，早已烂熟于耳，以java为最,php5.6之后更是扩展了面向对象式开发(起先引入对象概念，没当个大方向，这下无心插柳柳成荫，繁盛起来了)，js也基于对象式开发了。。。

开扒：

但是，JS没有类的概念，是构造函数和原型链的方式来体现的。

我这里仅通过1个例子(有点懒~)，尽量全面的分析下实现过程。

   /*=================定义“类”=================*/
   /*=======父类Foo=======*/
   function Foo(name,age){
     this.name = name;    //this是当前 [调用FOO()构造函数的] 对象,如果有子类Bar继承则代表子类对象
     this.age = age;      //this.参数名,则意味着各个对象,有属于自己的名字和年龄
    }                     //如上，是对象间差异化、独立性的体现
    
    /*父类Foo的原型*/
    Foo.prototype = {         //在此定义Foo对象公有的方法/属性，以节省内存、便于维护(性能上：如果把sayHi()方法定义在了Foo(name,age)构造函数中,等于说每new一个Foo或子类对象，每个对象在堆内存就会多占点空间来存放sayHi()方法,耗内存啊。)   
        sayHi:function(){     //公有方法  
            alert("Hi,I"m "+this.name);
        },
        guess:888             //公有属性
    };
    
    /*=======子类Bar=======*/
    function Bar(name,age,sex){    
        Foo.call(this,name,age); //等同于Foo.apply(this,[name,age]);你要初始化的东东，父类搞好了，只管调用
        this.sex = sex;          //Bar对象本身的特有属性
    }  
    /*子类Bar的原型是个Foo对象*/
    Bar.prototype = new Foo();   //Bar的原型类=Foo对象，意味着Bar对象能调到本身没有却在(Foo对象或者Foo.prototype)中存在的属性或方法
    
    //创建并调用
    var bar = new Bar("Lin",18,"male"); 
    bar.sayHi();

运行效果:

案例补充说明:

    
    1)var bar = new Bar("Lin",18,"male"); 
    解释:
        new 一个 Bar对象，名为bar.
        bar就继承了Foo类的属性和Foo原型上的方法。
        
    2)bar.sayHi();    //可调
    解释:
        bar对象，首先自身查找是否有sayHi()方法，没有则bar.__proto__得到Bar.prototype;
        在Bar.prototype这个原型对象中继续查找，而前面我们已指定Bar.prototype = new Foo();
        则意味着是在Foo对象中查找，然而Foo对象本身没有sayHi()方法;
        则调用(new Foo()).__proto__得到原型对象Foo.prototype;
        继续在该原型对象Foo.prototype中查找sayHi()方法;
        终于找到了！！！返回结果吧。
    
    扩展：
       如果依然没找到，就会Foo.prototype.__proto__得到Object.prototype,
       Object.prototype本身没有sayHi()方法，就会
       Object.prototype.__proto__得到null.
       null是最顶级的对象。在该对象中,查无此方法，就报错了;查无此属性，就undefined.

涉及术语:

原型链
    各构造函数，各有与之相对应的原型；
    类之间的继承，就暗暗的把原型间的关系统筹在了一起。
    顶层原型上方法或属性的查找过程，就是依靠着原型间的这种关系，一层一层的向上查找的。

原型继承
     Bar.prototype = new Foo(); 

借用继承
     Foo.call(this,name,age); //Foo.apply(this,[name,age]);

组合继承
     function Bar(name,age,sex){    
        Foo.call(this,name,age);
        this.sex = sex;                
     }  
    Bar.prototype = new Foo();  

    现象式总结：        
        仅是原型继承，子类Bar确实可调用(父类Foo的属性和原型上的方法)了，但实例化出来的Bar对象就不独立了。意味着某个对象对Foo构造函数中的属性或方法的修改，会影响到其他对象调用的结果.
        简言之，子类可调父类了，但是实例化的对象不独立。

        仅是借用继承，子类bar实例化的对象是独立的，对象间不受影响，但父类原型上的方法调不了了.
   
        推荐组合继承，既保证了对象间的独立性，又能调用到父类的原型上的方法。

福利:

1.原型链图示（网上找的，看懂即可跳过上述内容）

该图把原型和构造函数间的关系理的很清楚，可在Google浏览器的console运行demo并查看对象下原型间的关系。

2.JS高级部分，之前看的是ali的Bosn的JavaScript深入浅出

如有不适内容，欢迎指正。

GPU云服务器云服务器面向对象编程面向对象java编程面向对象编程语言 java面向对象编程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91809.html

<<深入PHP面向对象、模式与实践>>读书笔记:面向对象设计和过程式编程

摘要：注本文内容来深入面向对象模式与实践中节。面向对象设计与过程式编程面向对象设计和过程式编程有什么不同呢可能有些人认为最大的不同在于面向对象编程中包含对象。面向对象编程和过程式编程的一个核心区别是如何分配职责。注:本文内容来中6.2节。 6.2 面向对象设计与过程式编程面向对象设计和过程式编程有什么不同呢？可能有些人认为最大的不同在于面向对象编程中包含对象。事实上，这种说法不准确。...

xiao7cn 2019-07-01 11:22 评论0 收藏0
编程范式与函数式编程

摘要：声明式编程一种编程范式，与命令式编程相对立。常见的声明式编程语言有数据库查询语言，正则表达式逻辑编程函数式编程组态管理系统等。函数式编程，特别是纯函数式编程，尝试最小化状态带来的副作用，因此被认为是声明式的。编程范式与函数式编程一、编程范式的分类常见的编程范式有：函数式编程、程序编程、面向对象编程、指令式编程等。在面向对象编程的世界，程序是一系列相互作用（方法）的对象（Class...

noONE 2019-08-23 18:32 评论0 收藏0
初探面向对象编程之oop与设计模式

摘要：为什么要采用面向对象编程解决问题更容易设计计算机程序就是为了解决人类的问题。面向对象编程需要对业务及代码的架构是有一定的要求的。 1. 编程方式我们目前的编程方式大体可以有以下三种编程方式：顺序编程过程式编程面向对象编程在讲面向对象编程时先讲一下什么是顺序编程，什么是过程式编程，什么是面向对象编程：顺序编程：就是只用一个单线程去执行一段代码，执行过程根据代码依次从上...

BingqiChen 2019-06-28 13:17 评论0 收藏0
编程模型（范式）小结

摘要：参考链接面向对象编程模型现在的很多编程语言基本都具有面向对象的思想，比如等等，而面向对象的主要思想对象，类，继承，封装，多态比较容易理解，这里就不多多描述了。前言在我们的日常日发和学习生活中会常常遇到一些名词，比如命令式编程模型，声明式编程模型，xxx语言是面向对象的等等，这个编程模型到处可见，但是始终搞不清是什么？什么语言又是什么编程模型，当你新接触一门语言的时候，有些问题是需...

miya 2019-08-15 13:30 评论0 收藏0