JavaScript的面向对象的理解


0.前言

以前和大家分享的都是JavaScript的基础,现在就和大家分享的是比较有难度的知识点——对象。注意啊各位广大单身狗们,你们的福利来了,没有对象的人,现在可以“new”出来一个了。嘻嘻(o)/~

1.面向对象编程思想简介

不管是学习何种语言,都会学习到面向对象,当然c语言是面向过程的,这无疑加大了程序员的工作量,而且不利于维护。但是面向对象,则显得方便快捷,大大提高了程序员的工作效率。那么JavaScript的面向对象有事如何呢?我们一起来了解一下。

(1)什么是面向对象?

①把数据及对数据的操作方法放在一起,作为一个相互依存的整体——对象。
②对同类对象抽象出其共性,形成类。
③类中的大多数数据,只能用本类的方法进行处理。
④类通过一个简单的外部接口与外界发生关系,对象与对象之间通过消息进行通信。
⑤程序流程由用户在使用中决定。

(2)理解面向对象

①面向对象是相对面向过程而言
②面向对象和面向过程都是一种思想
③面向过程
  强调的是功能行为
  关注的是解决问题需要哪些步骤
④面向对象
  将功能封装进对象,强调具备了功能的对象
  关注的是解决问题需要哪些对象
⑤面向对象是基于面向过程的。

(3)面向对象的四大特性

多态性、 继承性、 抽象性、 封装性

(4)软件编程的实质

软件编程就是将我们的思维转变成计算机能够识别语言的一个过程。
注意:面试的过程可能会被提到哦!!!

案例如图

从图中我们可以看到,要实现把大象关冰箱用面向过程面向对象两种思想的事项方法。
面向过程:如果用面向过程的方法实现的话,就是“自己”,注意是“自己”去把冰箱门打开,然后“自己”把大象装进冰箱,最后还是“自己”把把冰箱门关上。从始至终都是自己一个完成的。
面向对象:就是“自己”去找一个人,注意是“去找一个人”让它去把冰箱门打开、把大象装进冰箱、把冰箱门关上。从始至终都是“自己”去命令别人去做的,自己没有动手完成。至于这个人是怎么完成的我们不用去关心,只要你能找到能把大象关进冰箱的这个人就行了。这就是面向对象的思想。
可以总结出:面向过程时“自己”是执行者,面向对象时“自己”是指挥者。

(5)面向的对象的特点

①是一种符合人们思考习惯的思想
②可以将复杂的事情简单化
③将程序员从执行者转换成了指挥者
④完成需求时:
  先要去找具有所需的功能的对象来用。
  如果该对象不存在,那么创建一个具有所需功能的对象。

(6)JS中的面向对象(重点)
(1)Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类),注意是基于对象的语言,是一种弱类型语言
(2)对象:属性与方法的集合

2.字面量方式创建对象并访问属性和方法

属性:是一个字符串。
方法:是一个功能或者方法或者函数。

(1)字面量法创建对象,空对象
var obj1 = {};
console.log(obj1);
console.log(typeof obj1);

结果:

(2)字面量法创建对象,非空对象
var girlFriend = {
            //添加属性
            //冒号左侧是属性名   冒号右侧是对应的属性值
            name: "铁锤妹妹",
            // "name": "二雷",
            // 'name': "二雷",
            // 以上写法都是可以的,一般我们不建议给属性名加引号。但是以下几种情况必须加引号
            // 1、当属性名是JS中的保留字时必须加引号
            // 2、当属性名中存在空格或者其他特殊字符串时必须加引号
            // 3、当属性民以数字开头时必须加引号
            
            // "good man": 100,
            // "%^&!": "no zuo no die",
            // "1abc": "sha",
            
            height: 165,
            weight:55,
            age: 25,



            //行为
            eat: function(){
                console.log("吃");
            },

            run: function(){
                console.log("跑");
            },


            //带参数行为
            sleep: function(hours) {
                console.log("睡" + hours + "个小时");
            },

            //
            say: function(){
                console.log("身高:" + girlFriend.height);
                //在对象内部,this代表当前对象本身
                console.log("年龄:" + this.age);
            },
        };

结果:

(3)访问对象的属性(属性值)

公式一:对象名["属性名"]

console.log(girlFriend["name"]);

结果:


image

公式二:对象名 . 属性名,也叫点语法

console.log(girlFriend.height);

结果:


(4)修改属性值
girlFriend.weight = 180;
console.log(girlFriend);

结果:


(5)访问功能(函数)

公式一:对象名["功能属性名"](参数列表)

girlFriend["eat"]();

公式二:对象名 . 功能属性名(参数列表)

girlFriend.run();
girlFriend.sleep(10);
girlFriend.say();
(6)动态给对象添加属性

注意:后期添加的属性,在这之前使用该对象也会有当前添加的属性

girlFriend.faceValue = 100;
console.log(girlFriend);

结果:


(7)动态给对象添加方法
girlFriend.play = function(){
    console.log("玩");
};
girlFriend.play();
(8)动态删除对象属性
delete girlFriend.weight;
console.log(girlFriend.weight);

结果:


(9)动态删除对象行为
delete girlFriend.eat;
girlFriend.eat();

结果:


因为删除了eat()函数,所以才会报错,提示eat不是一个函数。

3.总结

今天就先介绍这一种方法吧,累死我了,本人已“事”,有事烧纸!!!!

转载来处 紫荆峰

你可能感兴趣的:(JavaScript的面向对象的理解)