js-基础-创建对象和函数的方式

最新推荐文章于 2021-01-16 14:29:19 发布

song-jian

最新推荐文章于 2021-01-16 14:29:19 发布

阅读量146

点赞数

本文链接：https://blog.csdn.net/sjyssn/article/details/82077839

版权


对象创建方式
------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            /*1.使用字面量来创建*/
            var obj1 = {
                name:"孙悟空",
                age:10,
                text:{name:"张三"},
                sex:"男",
                hs:function(){
                    console.log("HAHAHA");
                    return true;//函数会有返回值；
                }
            };
            console.log(obj1);
            console.log(obj1.hs);
            console.log(obj1.hs());



            /*2.通过Object构造器new一个对象，再丰富成员信息*//*也叫使用内置构造函数*/
             var obj2 = new Object();
                 obj2.name = "李四";
                 obj2.age =18;
                 obj2.text = {name:"王五"};
                 console.log(obj2);


            /*3.使用原生的构造函数模式来创建对象*/
             function Person(name,age){
//              this.name = "猪八戒",
//              this.age = 20;
                this.name = name;
                this.age = age;
             }
             var obj3 = new Person("猪八戒",18);
             console.log(obj3);


             /*4.工厂模式来创建对象*/
             function createPerson(name,age,job){
                var obj4 = new Object();
                obj4.name=name;
                obj4.age=age;
                obj4.job=job;
                obj4.sayName=function(){
                    alert(this.name);
              };
                return obj4;
            }

            var person1 = createPerson("jack",29,"Student");
            var person2 = createPerson("marry",27,"Doctor");
            console.log(person1);
            console.log(person2);

             /*5.以原型创建对象*/
            function Person(){}
            Person.prototype.name = 'Nike';
            Person.prototype.age = 20;
            Person.prototype.jbo = 'teacher';
            Person.prototype.sayName = function(){
                   console.log(this.name)
           };
            var person1 = new Person();
            var person2 = new Person();
            person1.__proto__.name ='Greg';
            console.log(Person.prototype.name)    //返回'Gren'
            console.log(person1.__proto__.name === Person.prototype.name)  //返回true
            console.log(person1);
            console.log(person2);
            person1.name = 'jack';
            console.log(person1.name);   //'jack'  实例
            console.log(person2.name);   // 'Gren' 原型
            person1.__proto__.sayName(); //'Greg' 
            person2.__proto__.sayName(); //'Greg' 


           /*6.对象都有自己的属性和方法*/


        </script>
    </body>
</html>

函数创建方式
 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            /*首先函数也是一个对象*/
            /*1.使用函数声明来创建函数
             *  语法：
             *     function 函数名([形参1，形参2，形参3...]){
             *           语句；
             *      返回值；
             * }
             *     函数名(实参1，实参2,...);调用
             */ 
                 function fun1(){
                    console.log("我是函数声明创建的");
                    return 1;
                    /*console.log("我不会执行");//return后面的代码不会执行*/
                 }
                   fun1();
                   console.log(fun1());
            /*2.使用函数表达式来创建函数
             *   var 函数名 = function([形参1，形参2，形参3...]){
             *              语句
             * }
             *   函数名(实参1，实参2,...);调用
             */
                  var fun2 = function(){
                     console.log("我是表达式创建的");
                  }
                  fun2();

               /*3.面试题*/
                  function fun3(){
                      var a = b = "hello world";
                  }
                      fun3();
//                    console.log(a);
                      console.log(b);
        </script>
    </body>
</html>