js 面向对象代码

贴上一段同事写的代码,值的纪念

<script type="text/javascript">

    //创建箱子类
    function Box(option) {
        var self = this;
        var _option = {
            height: 12,
            width: 12
        };
        //合并参数对象 : 记得引用Jquery.js
        $.extend(_option, option);

        this.height = _option.height;
        this.width = _option.height;
        //绑定事件列表
        var _events = {};

        //创建一个方法,并带有回调函数
        this.push = function(option, callback) {
            if (option.height > this.height) {
                console.error("over height", this);
                return;
            }
            if (option.width > this.width) {
                console.error("over width", this);
                return;
            }

            //判断是否有回调函数
            if (callback instanceof Function)
            //调用回调函数,并给它传值(参数:_option)
                callback.call(this, _option);
        }

        //绑定事件
        this.on = function(name, event) {
            if (name == null || !name)
                return null;

            if (!(event instanceof Function))
                if (self[name] instanceof Function) {
                    return self[name]();
                }

            if (event instanceof Function)
                _events[name] = self[name] = function() {
                    event.apply(this);
                    return this;
                }
        }

        //解除绑定事件
        this.unbind = function(name) {
            delete self[name];
            delete _events[name];

            //链式表达式
            return this;
        }
    }

    //创建box1对象
    var box1 = new Box();

    //创建box2对象
    var box2 = new Box();

    //调用方法
    box1.push({
        height: 12,
        width: 12
        //回调函数
    }, function(option) {

        console.log("push回调函数已调用..", option);
    });

    //动态给对象绑定事件
    box1.on("click", function() {
        this.width += 10;
        console.log("width递增10,click事件被调用..", this.width);
    });
    box1.on("heihei", function() {
        console.log("heihei事件被调用..", this.width);
    });

    //事件普通调用
    box1.click();
    //链式表达式调用方法
    box1.on("click").click().heihei().on("heihei");

    //打印box1的宽度
    console.log(box1.width);
    //打印box2的宽度
    console.log(box2.width);

    //解除绑定事件
    box1.unbind("heihei");
    //测试解除
    box1.heihei();

</script>

原文地址:https://www.cnblogs.com/yisheng/p/8805335.html

时间: 2024-10-11 23:13:00

js 面向对象代码的相关文章

js 面向对象讲解

1.面向对象概念 1)什么是面向对象:  oop    是一种编程的思想, 体现的是生活逻辑 2) 面向对象和面向过程: 面向过程: 1:大量的全局变量        2:命名冲突        3:顺序执行(一步一步一步........) 面向对象三大特性:封装  继承  多态(js没有多态的)           js:  封装\抽象\继承(借) 3) 写js面向对象代码特点:            高内聚(在一个功能模块里面所有的代码必须紧密相邻)            低耦合(模块和模块

js面向对象的系列

在面向对象语言中如java,C#如何定义一个对象,通常是定义一个类,然后在类中定义属性,然后通过new 关键字来实例化这个类,我们知道面向对象有三个特点,继承.多态和封装.那么问题来了,在javaScript中如何定义一个类?在javaScript中如何定义类的属性?如何继承?带着这些问题开始我们的js面向对象之旅吧. 在js中如何定义类? js中是没有类的概念的,但是我们通常会用一个函数定义成一个类.funtion class1(){ //类的成员定义 } 这里class1既是一个函数也是一个

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

js面向对象程序设置——创建对象

<script type="text/javascript">            //工厂方式        //1.原始方式        /* var objCar=new Object();        objCar.name="劳斯莱斯";        objCar.color="blue";        objCar.showColor = function() {          alert(this.colo

js面向对象编程:如何实现方法重载

js中如何实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的参数arguments 3如何利用arguments实现方法重载 1同名函数的调用问题 都知道在js中如果存在多个名称相同的函数,则调用实际每次都只使用最后一个,js其实是没有重载的,也就是说,如果定义了多个同名的函数,单参数不一样,在调用时,js不管参数个数,只管前后顺序 例如: function test1(arg1) { alert("参数1:"+arg1); } function test1(arg1

js面向对象深入理解

js面向对象深入理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 一.创建对象 创建一个对象,然后给这个对象新建属性和方法. var box = new Object(); //创建一个Object 对象 box.name = 'Lee'; //创建一个name 属性并赋值 b

js面向对象编程

1.js面向对象之对象 1.1js代码 <script> function hello(){ alert("hi!"); } //使用prototype属性为类添加属性和方法 hello.prototype={ name:"lihua", say:function(){ alert(this.name); } } //测试 function test(){ var people=new hello(); people.say(); alert(peopl

js面向对象编程:两个小括号的使用

在查看很多jQuery的过程中,经常遇到两个小括号的情况. 例如: (function() { alert("测试1"); })(); (function() { alert("测试3"); }()); 其实这段代码,就是定义了一个匿名函数,并且进行了调用, 相当于如下几行代码: (function ListCommon2() { alert("测试1"); })(); (function ListCommon3() { alert("

js面向对象编程:this到底代表什么?

在js中this的用法很让人迷惑,有些像Java或者C#中的this,但又不完全一样.按照流行的说法this总是指向调用方法的对象. 1.纯粹函数调用. function ListCommon2(x) { this.x=x; alert("this 是 ListCommon2"+(this instanceof ListCommon2)); alert("this.constructor"+this.constructor); } function test(){