面向对象的JS

原型(prototype):所有的JS对象都可以通过其原型来扩展,并且这个功能允许创建自定义类。

    /*     var answer = 0;//代码味太浓,不在局部作用域意味着可以在程序的任何部分被修改
     function addNumbers(num1, num2) {
     answer = num1 + num2;
     }
     //每个函数都是孤立的存在于全局作用域内,污染了全局作用域
     function subtractNumbers(num1, num2) {
     answer = num1 - num2;
     }
     function multiplyNUmbers(num1, num2) {
     answer = num1 * num2;
     }
     function divideNumbers(num1, num2) {
     if (num2 != 0) {
     answer = num1 / num2;
     } else {
     answer = 0;
     }
     }
     addNumbers(1, 2);
     alert(answer);
     subtractNumbers(1, 2);
     alert(answer);
     multiplyNUmbers(1, 2);
     alert(answer);
     divideNumbers(1, 2);
     alert(answer); */

    function NumberFunctions() {//面向对象,有良好的结构,便于理解
        var answer = 0;
    }
    NumberFunctions.prototype.addNumbers = function(num1, num2) {
        this.answer = num1 + num2;
    }
    NumberFunctions.prototype.subtractNumbers = function(num1, num2) {
        this.answer = num1 - num2;
    }
    NumberFunctions.prototype.multiplyNUmbers = function(num1, num2) {
        this.answer = num1 * num2;
    }
    NumberFunctions.prototype.divideNumbers = function(num1, num2) {
        if (num2 != 0) {
            this.answer = num1 / num2;
        } else {
            this.answer = 0;
        }
    }
    NumberFunctions.prototype.toString = function() {//创建的对象自动调用该方法
        return this.answer;
    }
    var nf = new NumberFunctions();
    nf.addNumbers(2, 1);
    alert(nf);//nf自动调用了toString()方法
    nf.subtractNumbers(10, 3);
    alert(nf);
    nf.multiplyNUmbers(4, 5);
    alert(nf);
    nf.divideNumbers(12, 6);
    alert(nf);
    /* 其优点如下:
    1)没有对全局作用域的污染,因为有NumberFunctions函数;
    2)所有函数实际上都是NumberFunctions类的成员,因此构造了一个清晰的关系;
    3)基本的面向对象:数据和操作数据的函数都封装得很好*/
时间: 2024-10-09 10:31:12

面向对象的JS的相关文章

面向对象的js编程 Call和apply方法

JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 一.方法定义 1.call 方法 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj  可选项.将被用作当前对象的对象. arg1, arg2,  , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.  

深入javascript面向对象,js的原型链、继承

进阶面向对象----------------------– 在JS源码中,系统对象也是基于原型的程序, 尽量不要去添加和修改系统对象的方法 包装对象----------------------– 基本类型都有自己对应的包装对象 比如String Number Boolean 基本类型会找到对应的包装对象类型,然后包装对象把所有的属性方法给了 基本类型,然后包装对象消失 例如 var str = 'abc'; str.num = 10; //创建一个包装对象,给包装对象加num属性,然后立刻消失.

面向对象的JS(一)

/*JavaScript和其他的语言类似,也是面向对象,自然也就是存在类和对象(对象是类的实例化)*/ //1.JS对象 var empty = {}; //没有任何属性的对象 var point = { x: 0, y: 0 }; //两个属性和值 var point2 = { x: point.x, y: point.y } //复杂的属性和值 var book = { "main title": "javascript", //属性名字中有空格,必须用字符串表

JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解

  前  言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于汇编语言这样的面向机器的语言,随着时代的发展已经逐渐淘汰:而面向过程的语言也只有C语言老大哥依然坚挺:现在主流的语言(例如Java.C++.PHP等)都是面向对象的语言. 而我们的JavaScript语言,恰恰介于面向过程与面向对象之间,我们称它为"基于对象"的语言.但是,JS中的OOP依

面向对象编程js

几种模块化js编程demo var module1 = new Object({ _count:1, m1:function(){ console.log("m1 method start..."); }, m2:function(){ console.log("m2 method start..."); } }); module1.m1(); console.log(module1._count); var module2 = (function(){ var _

面向对象认识js

对象的作用是什么? •把和某个主题有关的功能等放在一起,统一管理. •比如浏览器分成window对象,document对象 •分别放置了和这个对象有关的一些操作,我们不用关心实现细节,直接使用. 函数的作用是什么? •封装细节 其实对象就是一个函数容器 •函数封装细节,对象可以将几个函数放在一起,对象就类似一个容器,以后我再想使用某个函数,可以从这个容器里面寻找对应的函数即可 原型对象本质 •通过原型创建对象,其实创建的是两个对象 –构造函数对象 –原型对象 •当我们实例化的时候,该实例自动拥有

面向对象的js写法

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <title></title>     <style>         *{paddi

对象(类)的封装方式(面向对象的js基本知识)

上一个月一直忙于项目,没写过笔记,今天稍微空下来了一点 前几天在写项目的时候关于怎么去封装每一个组件的时候思考到几种方式,这里总结一下: 1.构造函数方式(类似java写类的方式):把所有的属性和方法全部挂在构造函数内部的this上: 1 function Textarea(opts) { 2 this.defaults = { 3 //...这是一些默认属性 4 }; 5 this.options = $.extend(true, {}, this.defaults, opts); 6 thi

面向对象原生js幻灯片代淡出效果

下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co