js中的OOP编程

Posted 2020-08-31

本文适用于es6之前。。。

javascript需要用函数来模拟类。

function Book(name) {
    this.name = name;
    this.getName = function () {  
          return this.name;  
    }  
    this.setName = function (nname) {  
           this.name = nname;  
    } 
}

new 一个对象

var book1 = new Book("C#");//这里的new操作相当于先创建了一个简单对象，调用了类的构造函数

每一个function上面都有一个原型对象 --prototype

var proto = Book.prototype;  
proto.str = "string";  
proto.hello = function () {  
     alert("Hello");  
}  
//给原型定义了属性和方法后，拥有这个原型对象的function模拟出来的类，也具有该属性和方法  
     alert(book1.str); //弹出string  
     book1.hello(); //弹出hello  
}  

补充一段常见的问题

function animal(name) {  
    this.name = name;  
    this.age = 0;  
}  
    var a1 = animal;  
    alert(a1); // 弹出整个函数体  
    var a2 = animal("dinglang");  
    alert(a2); //弹出undefined  
    var a3 = new animal();  
    alert(a3);//弹出object  
    var a4 = new animal;  
    alert(a4);//弹出object  

类的修改，扩展（重点，难点） 

//1.假如我要实现一个简单的加法计算  
            var numOne = 5; //如果直接这么定义，那么下面的numOne.add(8);执行会报错  
            //如果我这么写，下面调用就不会报错了(因为此时的numOne，是个类.相当于java或C#语言中原始的基本数据类型、包装类型)  
            var numOne = new Number(5);  
            numOne.add = function (numTwo) {  
                return this + numTwo;  
            }  
            alert(numOne.add); //undefined  
            alert(numOne.add(8));//这样写看起来没错，但是会报错--numOne.add is not a function  
            var numThree = new Number(100);  
            //如果我现在想要给numThree对象中也加上add这么一个函数  
            //直接使用prototype这个特殊的属性来实现，给所有的Number类型实例都加入add函数  
            Number.prototype.add = function (numTwo) {  
                return this + numTwo;  
            }  
  
            alert(numThree.add(200).add(300)); //弹出600   100+200+300=600   

实现javascript中的继承

 function classA(name) {  
                this.name = name;  
                this.showName = function () {  
                    alert(this.name);  
                }  
            }  
            function classB(name) {  
                //1)使用newMethod的方式实现继承  
                //                this.newMethod = classA;  
                //                this.newMethod(name);  
                //                delete this.newMethod; //释放对象  
                //2)调用claasA这个函数，并把他的上下文(作用域)指向this(也就是classB类的实例)  
                //这样也能实现继承效果（使用call或者apply）  
                classA.call(this, name);  
                //classA.apply(this,[name]);  
            }  
            objA = new classA("操作系统");  
            objB = new classB("组成原理");  
            objA.showName(); //弹出“操作系统”  
            objB.showName(); //弹出“组成原理”  
  
        })