• JavaScript 中的面向对象的初步认识


    我在学习JS的面向对象编程的时候,总是有两个奇怪的问题。

    第一个就是:面向对象在JS中很少用到。。。 

    可能是目前自己做的项目还是比较简单,前端方面的任务我几乎都是用面向过程的方式写的,所以就导致,我啃了那么久的书,代码也跟着书上的例子敲了,但好像一点收获也没有,还是不知道JS的面向对象有什么用。当然,我知道是自己目光短浅。。因为JS可是像个单身很久的家伙一样一直强调“万物皆对象”的!

    第二个是:prototype 这个鬼。。。

    刚开始学面向对象的时候,我仗着自己JAVA底子还不错,直接就去找了一个JS面向对象的实例去看。当然,看完就懵逼了....

    然后啃书 《JavaScript高级程序设计》,看完之后彻底蒙圈。。。prototype这个鬼到底是什么鬼啊。

    所以,今天去看了教学视频,感觉从视频中还是学习到了一部分经验,就来记录一下,为以后进一步研究打个基础。

    首先,先说说 prototype 这个家伙。他有个很常见的称呼——原型。当初就是因为这个名字把我带进了坑里,直接导致我的学习目标变成了“我要知道原型到底是个什么鬼”。其实原型有个很好的理解方法,这是我今天在视频中学到的。

    如果你要对CSS有一定的了解,那我们可以把原型看做是CSS样式中的类(class),而通过构造函数new出来的对象就像是文档中引用了这个类的元素。

    因为有相同class的元素,他们的样式都相同,要写让他们其中若干个产生变化,那我们一般都会采取 行间样式(style)这种方式来修改,让他们体现不同,利用这样的特性我们可以把属性就理解成元素的行间样式。

    这样理解的话会不会容易一点?反正我是有种被点化的感觉..通过这样的方式,写一个简单的面向对象的例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function Person(name){
                this.name = name;
            };
    
            Person.prototype.sayHello = function (){
                console.log(this.name +" say hello~");
            }
    
            var tom = new Person('tom');
            var jerry = new Person('jerry');
    
            tom.sayHello();
            jerry.sayHello();
        </script>
    </head>
    <body>
    
    </body>
    </html>



    这样就有一点面向对象的意思了,当你运行程序  就会 看到 效果。


    最后,总结一下这个简单的面向对象的方法:

    构造函数加属性,原型prototype加方法,这样就实现了JS的面向对象。


    以上就是我对JS面向对象的初步认识。

    2015.12.29

  • 相关阅读:
    7月的尾巴,你是XXX
    戏说Android view 工作流程《下》
    “燕子”
    Android开机动画bootanimation.zip
    戏说Android view 工作流程《上》
    ViewController里已连接的IBOutlet为什么会是nil
    My first App "Encrypt Wheel" is Ready to Download!
    iOS开发中角色Role所产生的悲剧(未完)
    UIScrollView实现不全屏分页的小技巧
    Apple misunderstood my app,now my app status changed to “In Review”
  • 原文地址:https://www.cnblogs.com/laobeiV5/p/5106646.html
Copyright © 2020-2023  润新知