• 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,原型链
  • 相关阅读:
    logback-spring.xml配置文件详解
    SpringBoot-Controller接收参数的几种常用方式
    spring boot配置定时任务设置
    SpringCloud 配置文件 application.yml和 bootstrap.yml区别
    ajax/get请求
    ajax封装2
    ajax封装1
    楼层特效
    旋转动画
    联动动画
  • 原文地址:https://www.cnblogs.com/Fredric-2013/p/4390441.html
Copyright © 2020-2023  润新知