zoukankan      html  css  js  c++  java
  • js下的面向对象

    本文记录了一种Javascript的面向对象方法及原理理解,示例代码如下:

    //构造函数
    var MClass = function(value1, value2) {
        this.member = "hi";
        //定义成员属性
        Object.defineProperty(this, 'member1', {
            value: value1
        });
        Object.defineProperty(this, 'member2', {
            value: value2
        });
    }
    
    MClass.prototype.member0 = "bao";
    
    //原型方法
    MClass.prototype.sayHello = function() {
        console.log(this.member + " " + this.member0);
        console.log('hello  ' + this.member1 + '  And  ' + this.member2);
        return this;
    }
    
    //静态方法(类方法)
    MClass.staticSayHello = function() {
        console.log('hello  ' + this.member0 + " " + this.member);
        return;
    }
    
    
    var entity = new MClass('fredric', 'sinny');
    MClass.staticSayHello();
    entity.sayHello().sayHello();

    执行结果:

    hello  undefined undefined
    hi bao
    hello  fredric  And  sinny
    hi bao
    hello  fredric  And  sinny

     //**********************************************************************************************************

    补充一些基本概念

    1、javascript 中所有都是对象,包含Object,也包括Function;

    2、javascript 是一种面向对象的语言,但并非如C++和JAVA一样是面向类的继承,而是面向原型的继承;简单的讲是对象继承对象;

    3、每个javascript对象都会有一个__proto__属性,这是一个内部属性,指向它继承的基类对象,这里叫原型对象;

    function BASE(){
        this.x = 1;
    }
    BASE.prototype.y = 2;
    BASE.prototype.func(){
    console.log("hello");}

    如果此时 var a = new BASE(); 那么a的_proto_会指向BASE.prototype,注意没有this.x属性;

    备注:这里的原型可以以原型链的形式不端继承。

    那么x属性是如何继承的,我们要打开new的机制,在javascript中这个new其实做了三件事情;

    1、创建一个新对象;

    2、将新对象的_proto_属性指向原型,即prototype;

    3、调用BASE的构造函数;就是BASE自己,此时a具备属性x;

    因此我是这样理解的,function也是object,但不等价于object(这里指var a),至少有两点不同:1、具备构造函数,2、可以定义protorype,基于这两点因素,Function被用来实现javascript下的面向对象。

    下面记录一个例子:

    function TEST(n){
        this.m = n
    };
    
    var a = new TEST(4);
    
    TEST.prototype.test = 1;
    TEST.prototype.testfunc = function(){
        console.log("hello");
    }
    
    //a.prototype.test2 = 3; //编译出错
    console.log(TEST.constructor);//[Function: Function]
    console.log(TEST.__proto__);//[Function: Empty]
    console.log(TEST.prototype);//{ test: 1, testfunc: [Function] }
    console.log(a.__proto__);//{ test: 1, testfunc: [Function] }
    console.log(a.constructor);//[Function: TEST]
    console.log(a.prototype);//undefined
    console.log(a.m);//4
    
    var TEST1 = function(){};
    TEST1.prototype = new TEST(3);
    TEST1.prototype.test1 = 4;
    console.log(TEST1.prototype);//{ m: 3, test1: 4 } ,这里居然包含了m:3??
    console.log(TEST1.__proto__);//[Function: Empty]
    
    var b = new TEST1();
    console.log(b.__proto__);//{ m: 3, test1: 4 }
    b.testfunc();//hello
    console.log(b.__proto__.test1);//4
    console.log(b.__proto__.__proto__);//{ test: 1, testfunc: [Function] } 这里是TEST的prototype,原型链
  • 相关阅读:
    MDX Step by Step 读书笔记(六) Building Complex Sets (复杂集合的处理) Filtering Sets
    在 Visual Studio 2012 开发 SSIS,SSAS,SSRS BI 项目
    微软BI 之SSIS 系列 在 SSIS 中读取 SharePoint List
    MDX Step by Step 读书笔记(五) Working with Expressions (MDX 表达式) Infinite Recursion 和 SOLVE_ORDER 原理解析
    MDX Step by Step 读书笔记(五) Working with Expressions (MDX 表达式)
    使用 SQL Server 2012 Analysis Services Tabular Mode 表格建模 图文教程
    MDX Step by Step 读书笔记(四) Working with Sets (使用集合) Limiting Set and AutoExists
    SQL Server 2012 Analysis Services Tabular Model 读书笔记
    Microsoft SQL Server 2008 MDX Step by Step 学习笔记连载目录
    2011新的开始,介绍一下AgileEAS.NET平台在新的一年中的发展方向
  • 原文地址:https://www.cnblogs.com/Fredric-2013/p/4390441.html
Copyright © 2011-2022 走看看