继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

初识JavaScript的面向对象

木易涛童鞋
关注TA
已关注
手记 28
粉丝 36
获赞 1649

首先,面向对象是什么?

浅显地说,面向对象就是只关注对象提供的功能,不在乎其内部的具体细节;

比如,电视机,我们知道怎么打开、关闭、调台,但一般我们是不知道它到底是如何打开、关闭、调台的。

再比如,黑匣子;

面向对象是一种通用思想,并非只有编程中才使用,任何事情都可以找到它的影子。

接着,我们看看OOP的特点:

面向对象编程的三大特点:

1. 抽象---抓住核心问题;

2. 封装---只考虑功能使用,不考虑内部实现;

3. 继承---从已有的对象上,继承出新的对象;

然后,我们看看原型:

定义就不粘贴了,通俗滴说,prototype类似于我们css中的class;

比如,我们给多个div添加相同的属性时,就会使用class;同样的,使用prototype就是需要添加多个方法:


CreatePerson.prototype.showName = function() {
            console.log("我是" + this.name);
        }
CreatePerson.prototype.showQQ = function() {
            console.log("我的qq号是:" + this.qq);

代码中,一个人的名字和QQ号,可以使用一般的函数来解决,若两个,十个的就麻烦了,因此使用原型prototype可以很好地解决函数重复导致的资源浪费

再说说类和对象的关系:

对象,由方法和属性组成;

,比如数组Array;

    var arr = new Array(1, 2, 3, 4);

其中arr是对象,Array是

我们可以把看做是制作产品的磨具,而对象就是由模具制作出来的产品
---模具;
对象---产品;

代码:面向过程


<script type="text/javascript">
        function createPerson(name, qq) {
//          加new之后,系统偷偷给加了var this=new Object();
//          var person1 = new Object();
            this.name = name;
            this.qq = qq;
            this.showName = function() {
                console.log("我是" + this.name);
            }
            this.showQQ = function() {
                console.log("我的QQ号是" + this.qq);
            }
//          加new后这里又偷偷地执行return this;
//          return person1;
        }
        var person1 = new createPerson("杨子龙", "33441524");
        var person2 = new createPerson("王德彪", "66111314");

        person1.showName();
        person1.showQQ();

        person2.showName();
        person2.showQQ();
        console.log(person1.showName == person2.showName)
    </script>

以上代码是由工厂方式创建;
用构造函数function createPerson(name, qq) {}创建一个类;
调用函数使用关键字new:var person1 = new createPerson();这时系统就是替你创建了一个空白对象var this=new Object();并且还替你返回了这个对象return this;

工厂方式的问题:函数重复使用导致资源浪费;

console.log(person1.showName == person2.showName)       //false

代码:面向对象

<script type="text/javascript">
        function CreatePerson(name, qq) {
            this.name = name;
            this.qq = qq;
        }
        CreatePerson.prototype.showName = function() {
            console.log("我是" + this.name);
        }
        CreatePerson.prototype.showQQ = function() {
            console.log("我的qq号是:" + this.qq);
        }
        var person1 =new CreatePerson("王德彪", 330441338);
        var person2 =new CreatePerson("杨子龙", 369898363);

        person1.showName();
        person1.showQQ();

        person2.showName();
        person2.showQQ();

        console.log(person1.showName == person2.showName);
</script>

面向对象——1. 使用构造函数加属性;2. 使用原型加方法
这时console.log(person1.showName == person2.showName);,会是true,因为person1和person2都来自同个原型:CreatePerson.prototype.showName()

打开App,阅读手记
41人推荐
发表评论
随时随地看视频慕课网APP

热门评论

一下子就懂了,以前都是很模糊的概念

原来还有JavaScript面向对象啊。

哪儿来的工厂方式?怎么觉得不对呢?

查看全部评论