javascript 面向对象整理

 整理一下js面向对象中的封装和继承。

1.封装

  js中封装有很多种实现方式,这里列出常用的几种。

1.1 原始模式生成对象

  直接将我们的成员写入对象中,用函数返回。 缺点:很难看出是一个模式出来的实例。

代码:

function Stu(name, score) {
            return {
                name: name,
                score: score
            }
        }

        var stu1 = Stu("张三", 80);
        var stu2 = Stu("李四", 90);

        console.log(stu1.name); // 张三

1.2 生成构造模式对象

  js帮我们提供了一个使用构造函数生成对象的模式,¨所谓“构造函数”,其实就是一个普通函数,但是内部使用了this变量。当使用new关键字对构造函数生成实例后,this变量则会绑定在实例对象上。

  直接上代码:

function Stu(name, score) {

            this.name = name,
            this.score = score

        }

        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);

        console.log(stu1.name + "/" + stu2.score); // 张三  90

        console.log((stu1.constructor == Stu) + "/" + (stu2.constructor == Stu)); // true  true

        console.log((stu1 instanceof Stu) + "/" + (stu2 instanceof Stu)); // true  true

 主要方法一般写在success中,从后台获取的数据一般是这样传过来的: 

不难看出js的构造函数生成对象和C#用class生成对象如出一辙,都是用模板定义对象成员通过new关键字实例化。

用C#代码生成同样的Stu对象

Class Stu
{
public string name;
public double score;                   
}

 

ok,到这儿基本的对象有了。 那么现在我们需要一个所有对象都公用的方法,而且只让这个方法创建一次。(不随着对象new而重复创建)  怎么办呢? 大家都知道在C#中我们可以用静态成员。那么在js中怎么做呢?
1.3 Prototype模式

在js中,每一个构造函数都有一个prototype属性,这个对象的所有属性和方法,都会被构造函数的实例继承。那么我们直接给prototype添加成员就相当于在C#中声明静态成员了。

代码:

function Stu(name, score) {
            this.name = name,
            this.score = score
        }

        Stu.prototype.type='学生';
        Stu.prototype.log = function (s) {
            console.log(s);
        }

        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);

        console.log(stu1.type + "/" + stu2.type); // 学生 学生
        stu1.log('hello');  // hello
        console.log(stu1.log == stu2.log);  // true

封装就讲到这儿了,下面我们来看看js中继承又是如何实现的?

2.继承

2.1 构造函数绑定
  在子函数中直接调用 call或apply方法,将父对象的构造函数绑定在子对象上。
function Stu(name, score) {
            Grade.apply(this, arguments);
            //Grade.call(this, arguments);
            this.name = name,
            this.score = score
        }

        function Grade() {
            this.code = "初中";
            this.ask = function () {
                console.log("大家好");
            }
        }

        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);

        console.log(stu1.code); // 初中
        stu1.ask(); // 大家好
 这里的apply做了两件事情,把第一个参数this给Grade构造函数(调用者),然后再执行Grade里的代码。就相当于将Grade中用this定义的成员在Stu中再执行一遍。

2.2 通过prototype继承

  先看代码

代码:

function Stu(name, score) {

            this.name = name,
            this.score = score
        }

        function Grade() {
            this.code = "初中";
        }

        Stu.prototype = new Grade();

        Stu.prototype.constructor = Stu; //防止继承链的紊乱,手动重置声明

        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);

        console.log(Stu.prototype.constructor); // 自己的构造函数
        console.log(stu1.code); // 初中

前面说过prototype就相当于C#中的静态成员,所以我们就把父类的所有成员都变成自己的静态成员来实现继承。

  通过prototype继承有一个缺点:所有继承的成员都是静态的,那么怎么继承对象成员呢?

2.3 拷贝继承

  把父对象的所有属性和方法,拷贝进子对象,实现继承。

代码:

function Stu(name, score) {
            this.name = name,
            this.score = score
        }

        function Grade() {}
        Grade.prototype.code = "初中";
    }
        //函数封装
        function extend(C, P) {
            var p = P.prototype;
            var c = C.prototype;
            for (var i in p) {
                c[i] = p[i];
            }
        }
        extend(Stu, Grade);
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        stu1.code='高中';
        console.log(stu1.code); // 高中
        console.log(stu2.code); // 初中
        console.log(Stu.prototype.constructor);
        console.log(Grade.prototype.constructor)

    js面向对象的整理就写到这了,这个东西也不是一成不变的,使用的时候根据自己的需求做改动。  有句话说的很好,合适的才是最好的。

时间: 2024-09-19 04:26:53

javascript 面向对象整理的相关文章

原生 javascript 面向对象分析及思考

面向对象语言有三个特征:  封装,继承,多态.而js初学者一般会觉得js同其他类C语言一样,有类似于Class这样的关键字可以让我们在js中更好的进行面向对象的操作.可事实并非如此. 严格地说,js不是一门面向对象的语言,但是我们可以利用js里面的一些高级特性来进行OOP编程.  ----封装 在js中,如何来创建一个对象呢?这非常简单,我们只需要new一个已封装好的函数(就是类C语言中的类),就可以实例化一个对象了. 那我们首先来构造这么一个"类",在构造之前必须知道一个类需要有&q

javascript 面向对象封装与继承_javascript技巧

整理一下js面向对象中的封装和继承. 1.封装 js中封装有很多种实现方式,这里列出常用的几种. 1.1 原始模式生成对象 直接将我们的成员写入对象中,用函数返回. 缺点:很难看出是一个模式出来的实例. 代码: 复制代码 代码如下:        function Stu(name, score) {             return {                 name: name,                 score: score             }       

js面向对象 编程: JavaScript 面向对象编程,严格过程的标准化编程法,目前为止最好的 JS 生成对象代码结构

市面上流行了很多 JavaScript 面向对象的编程方法,其中不少都有好些问题.这里总结最正确的 JavaScript 面向对象编程模式.对于类 Special 继承自类 Common 继承自类 Super 的情况,一个 Special 对象的创建,详细说来,应该经历以下步骤.1 确定继承关系1.1 读取 Special 的父类,发现是 Common1.2 读取 Common 的父类,发现是 Super1.3 读取 Super 的父类,发现没有了(隐形父类 Object)2 加载类结构(如果没

JavaScript面向对象的支持(4)

javascript|对象 ================================================================================Qomolangma OpenProject v0.9 类别    :Rich Web Client关键词  :JS OOP,JS Framwork, Rich Web Client,RIA,Web Component,          DOM,DTHML,CSS,JavaScript,JScript 项目发

JavaScript面向对象的支持(3)

javascript|对象 ================================================================================Qomolangma OpenProject v0.9 类别    :Rich Web Client关键词  :JS OOP,JS Framwork, Rich Web Client,RIA,Web Component,          DOM,DTHML,CSS,JavaScript,JScript 项目发

JavaScript面向对象的支持(1)

javascript|对象 ================================================================================Qomolangma OpenProject v0.9 类别    :Rich Web Client关键词  :JS OOP,JS Framwork, Rich Web Client,RIA,Web Component,          DOM,DTHML,CSS,JavaScript,JScript 项目发

JavaScript面向对象的支持(6)

javascript|对象 ======================================================================Qomolangma OpenProject v0.9 类别    :Rich Web Client关键词  :JS OOP,JS Framwork, Rich Web Client,RIA,Web Component,          DOM,DTHML,CSS,JavaScript,JScript 项目发起:aimingoo

JavaScript面向对象的支持(5)

javascript|对象 ======================================================================Qomolangma OpenProject v0.9 类别    :Rich Web Client关键词  :JS OOP,JS Framwork, Rich Web Client,RIA,Web Component,          DOM,DTHML,CSS,JavaScript,JScript 项目发起:aimingoo

Javascript面向对象详解(第一部分)

一直想写一篇关于Javascript面向对象的文章,最近终于动工了,本来以为不会写的很长,可是后来发现有很多东西要写,大家先看着这前面的一部分吧,后面有更多的高级特性陆续跟进中,放心,绝对不是太监贴啊,对Javascript对象不太了解或者没有了解的人可以仔细看看哦,有错误之处大家多多指正哦,本人水平有限 (1)为什么要面向对象 在十年前或者也许更晚的时候,javascript都是一种被人当作玩具来使用的语言,大多时候,没有人乐于深入研究它的特性,而只是用它来实现各种花里胡哨的特效来炫耀自己的技