基于对象的语言--JS

来源：互联网发布：学生化妆品推荐知乎编辑：程序博客网时间：2024/06/05 19:03

基于对象？面向对象？

JS是一门基于对象、事件驱动编程的客户端脚本语言。为什么JS不是面向对象的语言？因为面向对象包括三大特征：封装、继承、多态。JS中只有封装，继承也只是模拟继承，谈不上面向对象。所有说，在JS中，一切都是对象，属性、数组、函数等等都是对象。

JS中没有重载

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">//          function test () {//              alert('test');//          }//          //          //          function test (x) {//              alert(x);//          }//          //          function test (x,y) {//              alert('x='+x+',y='+y);//              alert(x,y);//          }            //不写形参占位符，直接用arguments[]访问传过来的实参            function test () {                alert(arguments[0]);            }            test(10);        </script>    </head>    <body>    </body></html>

JS中没有重载，后面定义的同名函数会把前面的函数覆盖掉，永远只调用最后一个，而且JS中的形参只是占位符，定义两个形参，可以只传一个参数，只是为了方便程序员传来的实参。不写形参时，实参不能方便使用占位符，这时使用隐式形参arguments[0]来访问第一个实参，arguments[1]访问第二个实参等等。

使用函数模拟类

一般类的名称首字母大写，1.定义类时同时有了构造函数，2.方法的属性值是函数。
示例：

<script type="text/javascript">            function Student (sno,sname,age) {                this.sno = sno;                this.sname = sname;                this.age = age;                this.study  = function(){                    alert('我是'+this.sname+',我在学习')                }            }            var stu = new Student(1,'xiaoming',20);            stu.study();        </script>

二、使用Object类创建即时对象
delete stu.name;//可以删除属性
示例：

<script type="text/javascript">            var stu = new Object();            stu.sno = 1;            stu.sname = 'xiaoming';            stu.age = 20;            stu.study = function(){                alert('我是'+this.sname+',我在学习');            }            stu.study();        </script>

三、使用JSON来创建对象
JSON(JavaScript Object Notation),类似于XML，是一种数据交换格式。
方式1：
//1.创建对象
// var stu = {
// “sno”:1,
// “name”:’xiaoming’,
// “study”:function(){
// alert(this.name+’在学习’)
// }
// }
// stu.study();
方式2：
var student=[
{“sno”:1,
“name”:’xiaoming’,
“study”:function(){
alert(this.name+’在学习’)
}
},
{
“sno”:2,
“name”:’xiaomi’,
“study”:function(){
alert(this.name+’在学习’)
}
},
{
“sno”:3,
“name”:’xiaom’,
“study”:function(){
alert(this.name+’在学习’)
}
}];

    student[0].study();

减少全局变量的污染

我们写程序时，应尽量减少使用全局变量，同名容易冲突，这叫做全局变量的污染。例如：js和jQuery同时定义全局变量a,都引入页面中，后者会覆盖前者。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../A.js" type="text/javascript" charset="utf-8"></script>        <script src="../B.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            alert(myJs.a);            alert(myJQuery.a)        </script>    </head>    <body>    </body></html>A.jsvar myJs={};myJs.a='A';B.jsvar myJQuery={};myJQuery.a='B';

最好的方式，一个程序中，只定义一个全局变量，使用JSON，如上。

闭包

目的：使用闭包实现信息隐蔽，减少全局变量的污染，实现模块化开发。
1.在函数中定义函数，通过闭包放大了全局变量的作用域。new外部函数的对象，运行函数，内部函数的作用域就放大了。
2.在函数中定义JSON对象，返回这个对象，对象内部定义方法。

示例：

第一种方式：<script type="text/javascript">            function outer () {                var a = 10;                function inner () {                    alert(a++);                }                return inner;            }//a 的作用域到这            var test = outer();            test();//使用闭包放大了 a 的作用域              test();//使用闭包放大了 a 的作用域              test();//使用闭包放大了 a 的作用域          </script>第二种方式：<script src="bibao2.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">//          User.add();//          Category.add();            ////          jQuery.add();//另起的名字//          $.add();//          document.write(User);        </script>bibao2.jsvar User = (function(winObj){//还可以把整个window对象传进来    var i = 111;//区分各个工程，避免全局变量的污染    var jsonObj = winObj.jQuery = winObj.$ ={        "add":function () {            alert("增加用户"+i);//+i 区分工程        },        "update":function () {            alert("更改用户");        },        "delete":function () {            alert("删除用户");        }    }//  return i;    return jsonObj;})(window);var Category=(function () {    var i = 222;//同名，因为闭包，两个i互不影响    return{ //直接return jsonObj        "add":function(){            alert('增加商品数量'+i);        },        "update":function(){            alert('更改商品数量');        },        "delete":function(){            alert('删除商品');        }    };})();

模拟继承

一、使用call()函数来模拟继承

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            function Person (name,age) {                this.name = name;                this.age = age;                this.eat = function(){                    alert('姓名：'+this.name+",年龄："+this.age+",我在吃饭");                }            }            function Student(sno,name,age){                Person.call(this,name,age);//相当于super(name,age)                this.sno = sno;                this.study = function(){                    alert('学号：'+this.sno+',姓名：'+this.name+",年龄"+this.age+",我在学习");                }            }            var stu = new Student(1,'xiaoming',22);            stu.eat();            stu.study();        </script>    </head>    <body>    </body></html>

二、使用apply()函数来模拟继承

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            function Person (name,age) {                this.name = name;                this.age = age;                this.eat = function(){                    alert('姓名：'+this.name+",年龄："+this.age+",我在吃饭");                }            }            function Student(sno,name,age){                Person.apply(this,[name,age]);//相当于super(name,age)                this.sno = sno;                this.study = function(){                    alert('学号：'+this.sno+',姓名：'+this.name+",年龄"+this.age+",我在学习");                }            }            var stu = new Student(1,'xiaoming',22);            stu.eat();            stu.study();        </script>    </head>    <body>    </body></html>

三、使用原型prototype模拟继承

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            function Person (name,age) {                this.name = name;                this.age = age;                this.eat = function(){                    alert('姓名：'+this.name+",年龄："+this.age+",我在吃饭");                }            }            function Student(sno,name,age){                this.sno = sno;                this.name = name;                this.age = age;                this.study = function(){                    alert('学号：'+this.sno+',姓名：'+this.name+",年龄"+this.age+",我在学习");                }            }            //1.创建父类对象            var person = new Person();            //2.子类.prototype = person;            Student.prototype = person;            //把父类的原型赋值给子类的原型，原型一致，模拟实现了继承。            //但是会丢失子类的属性值，全变成了undefined，即使new 对象时加上了，也不起作用            //打脸，xiaoming既吃饭也学习            var stu = new Student(1,'xiaoming',20);            //动态的添加方法,即使在new对象之前没有这个方法            Student.prototype.test = function() {                alert('test动态添加方法');            }            stu.eat();            stu.study();            stu.test();        </script>    </head>    <body>    </body></html>

通过类的prototype属性，可以获知该类有那些属性和方法。
//1.创建父类对象
var person = new Person();
//2.子类.prototype = 父类对象
Student.prototype = person ;
//把父类的原型赋值给子类对象的原型，原型一致，模拟实现了继承。

这里写图片描述

阅读全文

0 0