• JS面向(基于)对象编程--构造方法(函数)


       构造函数(方法)介绍

       什么是构造函数呢?在回答这个问题之前,我们来看一个需求:前面我们在创建人类的对象时,是先把一个对象创建好后,再给他的年龄和姓名属性赋值,如果现在我要求,在创建人类的对象时,就直接指定这个对象的年龄和姓名,该怎么做?

       构造函数(方法)是一种特殊的方法,它的主要作用是完成对对象实例的初始化。它有几个特点:

    1. 构造函数(方法)名和类名相同。

    2. 在创建一个对象实例时,系统会自动的调用该类的构造方法完成对新对象的初始化。

       构造函数基本用法

    function 类名(参数列表){
        属性=参数值;//不带this为私有,带有this为共有。
    }

       如下例:

    function Person(name, age) {
        this.name = name;//this指代当前对象(即实例化的对象)
        this.age = age;
    }
    //创建Person对象的时候,就可以直接给名字和年龄
    var p1 = new Person("abc", 80);
    var p2 = new Person("hello", 9);
    window.alert(p2.name);

       当然,在给一个对象初始化属性值的时候,也可以指定函数属性。如下例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>构造函数</title>
        <script type="text/javascript">
            function jiSuan(num1, num2, oper) {
                if(oper == "+") {
                    return num1+num2;
                } else if(oper == "-") {
                    return num1-num2;
                } else if(oper == "*") {
                    return num1*num2;
                } else if(oper == "/") {
                    return num1/num2;
                }
            }
    
            function Person(name, age, fun) {
                this.name = name;
                this.age = age;
                this.myFun = fun;
            }
            var p1 = new Person("aa", 9, jiSuan);
            var p2 = new Person("aa", 9, null);
            // window.alert(p1.name);
            // window.alert(p1.myFun(89, 90, "+"));
            window.alert(p2.myFun(1, 2, "*"));//Uncaught TypeError: p2.myFun is not a function
        </script>
    </head>
    <body>
        
    </body>
    </html>

       构造方法(函数)小结

    1. 构造方法名和类名相同

    2. 主要作用是完成对新对象实例的初始化

    3. 在创建对象实例时,系统自动调用该对象的构造方法   

       类定义的完善:

       在介绍了构造函数(方法)后,我们类(原型对象)的定义就可以完善一步:

    function 类名() {
        属性;
    }

       ↓

    function 类名() {
        属性;
        函数(方法);  
    }

       ↓

    function 类名(参数1, 参数2, ...) {
        属性 = 参数1;
        函数(方法) = 参数2;  
    }

       

       

       面向对象编程进一步认识:

       创建对象的又一种形式

       1、对于比较简单的对象,我们也可以这样来创建(可以指定普通属性和函数属性),如:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>构造函数</title>
        <script type="text/javascript">
            var dog = {name:"小狗",
                        age:8, 
                        fun1:function(){window.alert("hello,world");},
                        fun2:function(){window.alert("ok");}
                       };
             window.alert(dog.constructor);
             window.alert(dog.name+dog.age);
             dog.fun1();
             dog.fun2();
        </script>
    </head>
    <body>
        
    </body>
    </html>

       2、有时,会看到这样一种调用方法:

    函数名.call(对象实例);

       例,

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>构造函数</title>
        <script type="text/javascript">
            var dog={name:'hello'};
            function test(){
                window.alert(this.name);
            }
            test();
            window.test();
            var name = "阿昀";
            //test.call(window);//输出阿昀
            test.call(dog); // <==> dog.test();
        </script>
    </head>
    <body>
        
    </body>
    </html>

       3、for...in,如:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>构造函数</title>
        <script type="text/javascript">
            var dog = {name:'小名',
                       sayHello:function(a,b){window.alert("结果="+(a+b));}
                      };
            //循环列出dog对象的所有属性和方法 对象名['属性名']
            for(var key in dog){
                window.alert(dog[key]);
            }
        </script>
    </head>
    <body>
        
    </body>
    </html>

       记住:可以使用该形式—对象名['属性名']—访问该对象中的属性和方法。

       又如:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>构造函数</title>
        <script type="text/javascript">
            document.writeln("****当前浏览器window对象有属性和方法****<br/>");
            for(var key in window){
                document.writeln(key+":"+window[key]+"<br>");
            }
        </script>
    </head>
    <body>
        
    </body>
    </html>

      

  • 相关阅读:
    批量改文件名小工具
    整理一下在 npmjs.com 上面发布资源包踩过的坑
    告别Vuex,发挥compositionAPI的优势,打造Vue3专用的轻量级状态
    vue3 专用 indexedDB 封装库,基于Promise告别回调地狱
    C++ 学习笔记(三):介绍几个在线编译器【转】
    【Linux】一篇文章彻底搞定信号!【转】
    缓存淘汰算法系列(一)【转】
    缓存淘汰算法 LRU 和 LFU【转】
    NAND Flash标准之ONFI VS TOGGLE【转】
    NAND FLASH学习笔记之nand flash基础(一)【转】
  • 原文地址:https://www.cnblogs.com/yerenyuan/p/5393212.html
Copyright © 2020-2023  润新知