面向对象入门

最新推荐文章于 2021-10-13 14:14:35 发布

颠沛流离的生活

最新推荐文章于 2021-10-13 14:14:35 发布

阅读量141

点赞数

分类专栏：个人博客文章标签：面向对象对象

本文链接：https://blog.csdn.net/qq_39857600/article/details/77200638

版权

个人博客专栏收录该内容

2 篇文章 0 订阅

订阅专栏

面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。

1、面向对象是一种思维方法

2、面向对象是一种编程方法

3、面向对象并不只针对某一种编程语言

数ECMA-262 把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”严格来讲，这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。正因为这样（以及其他将要讨论的原因），我们可以把 ECMAScript 的对象想象成散列表：无非就是一组名值对，其中值可以是数据或函。

<script type="text/javascript">
    //用大括号括起来的一系列的键值对，就构成了JavaScript对象。这种对象称之为字面量对象。
    var person = {
        name : "张三",    // 一个键值对  
        age : 20,
        sex : "男",
        eat : function () { //属性的值是函数，这个时候我们更喜欢把这样的属性称之为方法。
            alert("吃东西");
        }
    }
</script>

说明

name : “张三” 一个键值对表示JavaScript对象的一个属性。 name是属性名， “张三” 属性值。
属性可以是任意类型的。可以包括我们以前学的简单数据类型，也可以是函数，也可以是其他的对象。
当一个属性的值是函数的时候，我们更喜欢说这个属性为方法。(如果函数不和对象关联起来的时候，应该叫函数不应该叫方法。只是一种称呼，你完全可以不用理会)。我们一般说person对象具有了一个方法eat. 将来访问eat的时候，也和调用一个函数一样一样的。

访问对象的属性

alert(person.name);  // 访问person对象的 name属性值
person.age = 30;  //修改person对象的 age 属性
person.eat();  //既然是调用方法(函数) 则一定还要添加 ()来表示方法的调用
alert(person["name"]);  //

给对象添加属性

//给person对象的属性 girlFriend 赋值。在赋值的过程中，首先会判断这个属性在JavaScript中是否存在，如果存在就对这个
//属性重写赋值。如果不存在，就给这个对象添加这个属性，并赋值。
person.girlFrient = "小丽";  

//给对象添加方法
person.play = funcion(){
    alert("打击high起来");
}

删除对象属性

// 使用delete操作关键字，删除person对象的属性age
delete person.age;
alert(person.age);  //弹出undefined。表示这个属性没有定义

修改对象属性

// 把person对象的sex属性的值修改为 女
person.sex = "女";
person.eat = funcion(){
    alert("吃货");
}
person.eat();  //吃货

使用for…in遍历对象的属性

// 在用for...in遍历的时候， in前面的变量pn指的是属性的名称。
for (pn in person) {
    alert(pn + " " + person[pn]);
}

创建对象的方式

工厂模式的创建

虽然object构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点:使用同一个借口创建很多对象，会产生大量的重复代码。为了解决这个问题，人们开始使用工厂模式的一种变体。

工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程，考虑到在ECMAscript中无法创建类，开放人员就发明了一种函数，用函数来风装以特定借口创建对象的细节。

function createPerson(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function() {
            alert(this.name);
        };
        return o;
    }
    var person1 = createPerson("张三", 29, "js开发者");
    var person2 = createPerson("李四", 27, "java开发者");

构造函数模式创建

为了解决对象类型识别问题，又提出了构造函数模式。这种模式，其实在我们创建一些原生对象的时候，比如Array、Object都是调用的他们的构造函数。

看下面的代码

function Person (name, age, sex) {
        this.name = name;

        this.age = age;
        this.sex = sex;

        this.eat = function () {>
            alert(this.name + "在吃东西");
        }
    }
    var p1 = new Person("张三", 20, "男");
    p1.eat();   //张三在在吃东西
    var p1 = new Person("李四", 30, "男");
    p1.eat();   //李四在在吃东西
    alert(p1 instanceof Person);    //

说明：

使用构造函数创建对象，必须使用关键字new ，后面跟着构造函数的名，根据需要传入相应的参数。
其实使用 new 构造函数() 的方式创建对象，经历了下面几个步骤。
- 创建出来一个新的对象
- 将构造函数的作用域赋给新对象。意味着这个时候 this就代表了这个新对象。
- 执行构造函数中的代码。在本例中就是给新对象添加属性，并给属性初始化值。
- 构造函数执行完毕之后，默认返回新对象。所以外面就可以拿到这个刚刚创建的新对象了。

三级联动实例

面向对象版本html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="地域.js"></script>
</head>
<body>
    <select></select>省
    <select></select>市
    <select></select>县
    <script type="text/javascript" src="面向对象版本.js"></script>
</body>
</html>

面向对象版本js代码

var change = {
    init:function () {
        this.sel = document.querySelectorAll('select');
        this.fillProvince();
        this.fillCities(1);
        this.fillcounties(1);
        var self = this;
        this.sel[0].onchange = function() {
            var ProID = this.value;
            self.fillCities(ProID);
            self.fillcounties(self.sel[1].value);
        }
        this.sel[1].onchange = function () {
            var CityID = this.value;
            self.fillCounties(CityID);
        }
    },

//        获取省
        fillProvince:function () {
            var province = ld.provinceList;
            for(var sheng of province){
                var ProName = sheng.ProName;
                var ProID = sheng.ProID;
                var opt = this.createOption(ProName, ProID);
                this.sel[0].appendChild(opt);
            }
        },

//        获取市
        fillCities:function (ProID) {
            this.sel[1].innerHTML = "";
            var cities = ld.cityList;
            for(var city of cities){
                if(ProID == city.ProID){
                    var opt = this.createOption(city.CityName,city.CityID);
                    this.sel[1].appendChild(opt);
                }
            }
        },

//        获取县
        fillcounties:function (CityID) {
            this.sel[2].innerHTML = "";
            var counties = ld.countyList;
            for(var county of counties ){
                if (CityID == county.CityID){
                var opt = this.createOption(county.DisName,county.ID)
                this.sel[2].appendChild(opt);
                }
            }
        },

        createOption: function (text, value){
        var option = document.createElement("option");
        option.value = value;
        option.innerHTML = text;
         return option;
}
}
change.init();

面向对象过程版本html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="地域.js"></script>
</head>
<body>
    <select></select>省
    <select></select>市
    <select></select>县
    <script type="text/javascript" src="面向过程版本.js"></script>
</body>
</html>

面向对象过程js代码

var sel = document.querySelectorAll('select');
fillProvinces();
fillCities(1);
fillCounties(1);


sel[0].onchange = function () {
    var ProID = this.value;
    fillCities(ProID);
    fillCounties(sel[0].value);
}
sel[1].onchange = function () {
    var CityID = this.value;
    fillCounties(CityID);
}


    function fillProvinces() {
        var province = ld.provinceList;
        for(var sheng of province){
            var ProName = sheng.ProName;
            var ProID = sheng.ProID;
            var opt = this.createOption(ProName,ProID);
            sel[0].appendChild(opt);
        }

    }
    //获取市
    function fillCities(ProID) {
    sel[1].innerHTML = "";
        var cities = ld.cityList;
        for(var city of cities){
            if(ProID == city.ProID){
                var opt = this.createOption(city.CityName,city.CityID);
                sel[1].appendChild(opt);
            }
        }
    }
    //获取县
    function  fillCounties(CityID) {
    sel[2].innerHTML = "";
        var counties = ld.countyList;
        for(var county of counties){
            if(CityID == county.CityID){
                var opt = this.createOption(county.DisName,county.ID);
                sel[2].appendChild(opt);
            }
        }
    }

    function createOption(text,value) {
        var option = document.createElement("option");
        option.value = value;
        option.innerHTML = text;
        return option;
    }

三级联动省、市、县所需代码

http://files.cnblogs.com/files/youngerliu/city_code.js

颠沛流离的生活

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
面向对象入门

面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。1、面向对象是一种思维方法2、面向对象是一种编程方法3、面向对象并不只针对某一种编程语言数ECMA-262 把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”严格来讲，这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每
复制链接

扫一扫