让JS写的更接近OOP

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了让JS写的更接近OOP相关的知识,希望对你有一定的参考价值。

 

下面这段代码就是利用JS原型对象,来实现的类的继承DEMO 

 

$ 为jquery对象

////公共方法
//  $.oop.newClass=function newClass(obj) {
//     function create() {
//         if (obj != null)
//             return obj();
//     }
//     var c = new create();
//     return c;
// }

//
var person = $.oop.newClass(function () {

    //构造函数
    function person() {

    }

    //公有属性
    person.prototype.age = 15;

    //公有函数
    person.prototype.eat = function () {
        alert("我会吃");
    };

    return person;
});

//程序员
var programMonkey = $.oop.newClass(function () {

    //构造函数
    function programMonkey() {

    } programMonkey.prototype = person.prototype;//继承


    programMonkey.prototype.skill = "asp.net";

    programMonkey.prototype.work = function () {
        alert("我会加班");
    }

    return programMonkey;
});


var pm = new programMonkey();
//人的函数
pm.eat();
//程序猿的函数
pm.work();
//输出属性
alert("人家才" + pm.age + "岁,我是一个" + pm.skill + "猿");

 

因为JS一些特性实现一个多态也非简单

 

//共用函数
//$.oop.newClass = function (obj) {
//    function Create() {
//        if (obj != null)
//            return obj();
//    }
//    var c = new Create();
//    return c;
//}

var iPerson = $.oop.newClass(function () {

    //构造函数
    function person() {

    }
    person.prototype.name;
    person.prototype.iq;
    person.prototype.eat;
    return person;
});

//程序员
var programMonkey = $.oop.newClass(function () {

    //构造函数
    function programMonkey() {

    } programMonkey.prototype = iPerson.prototype ;//继承
    return programMonkey;
});

//设计湿
var designer = $.oop.newClass(function () {

    //构造函数
    function designer() {

    } designer.prototype = iPerson.prototype ;//继承
    return designer;
});



var inputValue = "程序员";

var ip = new iPerson();

if (inputValue == "程序员") {

    ip = new programMonkey();
    ip.iq = 0;
    ip.eat = function (msg) {
        alert(msg + "吃香蕉")
    }
    
} else if (inputValue == "设计湿") {

    ip = new designer();
    ip.iq = 100;
    ip.eat = function (msg) {
        alert(msg + "吃香蕉")
    }
}
ip.name = inputValue;
 
ip.eat("我是"+ip.name+"  智力"+ip.iq+" ");
 


 
 

 

根据不同的input Value会执行相应的 eat函数

 

以上是关于让JS写的更接近OOP的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

js中OOP小指南

如何把代码写的更优雅,你需要这一份代码精进书单!

js可以随意拖拽的div的实现

nodejs 基础篇整合