js创建对象的几种方法

js 同时被 3 个专栏收录
5 篇文章 0 订阅
6 篇文章 0 订阅
8 篇文章 0 订阅

对象:

我们先来了解一下对象吧!
定义:对象是可以拥有属性方法的一个集合
属性 变量
方法: 函数

函数对象的属性和方法:

函数对象的属性:
arguments
获取实际传递给函数的参数,类似数组,可以arguments[n]来访问单个参数的值,是Object的实例而不是Array的实例
length
获取函数【定义】的参数个数
caller
获取调用当前函数的函数。caller属性只有当函数正在执行时才被定义
callee
返回正被执行的 Function 对象,即指定的 Function 对象的正文。
constructor
获取创建某个对象的函数。constructor是每个具有原型的对象的原型成员。这包括除Global和Math对象之外的所有JavaScript内部对象。constructor属性就是用来构造对象实例的函数引用。
prototype
获取对象的原型。每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,会被构造函数的实例继承。也就是说,我们可以把那些不变的属性和方法定义在prototype对象上。
函数对象的方法:
apply
调用函数,并用指定对象替换函数的this值,同时用指定数组替换函数的参数。
call
调用一个对象的方法,用另一个对象替换当前对象。
bind
对于给定函数,创建具有与原始函数相同的主体的绑定函数。在绑定功能中,this对象解析为传入的对象,该绑定函数具有指定的初始参数。

创建对象的方法

一自定义对象
【需求】有时候我们需要一些对象,但系统没有,这就需要我们自己来定义对象

<script>
    //<一>自定义对象
    var Person=new Object();//创建一个自定义对象
    Person.name='小花';
    Person.age=18;//为自定义对象增加属性
    Person.walk=function(){
       console.log(Person.name+'在走路....') ;
    }//为自定义对象增加方法
    console.log(Person.age);//调用自定义对象的属性
    Person.walk();//调用自定义对象的方法
    </script>

在这里插入图片描述
【分析】这样我们可以看到已经创建了一个自定义对象,我们取名为Person,有name和age属性,以及walk方法,我们可以调用它的属性和方法
二工厂模式创建对象
【需求】虽然我们可以自定义对象,但一个一个添加对象,太过于繁琐,于是引入了一种模式,工厂模式来创建对象
【优点】可以批量化的创建对象
【缺点】会为每一个对象都添加方法,造成内存的浪费

 function creat(name, age) {
            var obj = new Object();
            obj._name = name;
            obj._age = age;
            obj.walk = function () {
                console.log(obj.name + '在走路....');
            }
        }
        var s = creat('小花', 18);
        console.log(s);
        console.log(s.age);
        s.walk();

【分析】运行结果与自定义对象结果一致,拥有方法和属性,这样创建对象可以直接调用我们创建的函数,这个函数的作用就是创建自定义对象
三构造函数模式创建对象
【需求】因为我们自定义对象的时候都需要new object()去创建一个对象,那么为什么我们不直接将这个对象构建出来,然后直接调用我们的这个构建函数呢。
【注意】需要使用new来调用 ,系统会自动创建一个object对象,为该对象绑定和方法,并且调用结束时,将对象返回

//<三>构造函数模式创建对象
        function Person(name,age){
               this._name=name;
               this._age=age;
               this.walk = function () {
                console.log(this._name + '在走路....');
            }
        }
        //构造函数需要使用new来调用
        var s1=new Person('小花',18);
        var s2=new Person('小名',20);
        console.log(s1,s2);
        console.log(s1._age,s2._age);
        s1.walk();
        s2.walk();
       console.log(s1.walk==s2.walk);//false 

在这里插入图片描述
【分析】构造函数需要用new来调用,我们可以直接new我们的构造函数,来创建对象。我们发现s1对象和s2对象的walk方法是不同的,那是因为虽然我们调用的都是Person构造函数的walk方法,但是我们调用Person构造函数得到的对象保存的是地址,而不是内存空间,虽然s1和s2指向同一块地址空间,但他们的地址不同。
四.混合模式构建对象(最常用)
【需求】虽然我们也实现了直接创建对象,但是我们发现每new一个对象,都会为这个对象添加方法,这样造成了内存空间的浪费,于是我们引入了一种混合模式,将方法放入原型中,原型是公有的,只存在于构造函数中,这样我们创建对象的时候,不会将方法私有化给这个对象,实现创建一次,所有对象共同使用。
【注意】
将属性的声明在构造函数中完成(私有)
将方法的声明放入原型(公有)

//<四>混合模式构建对象(最常用)
        function Student(name, age) {
            this._name = name;
            this._age = age;
        }
        Student.prototype.text = function () {
            console.log(this._name + '在考试中');
        } //在原型中增加方法
        var s1 = new Student('李四', '19');
        s1.text();//李四在考试中

【分析】在构造函数的原型中增加方法,这样构造的对象实例也可以使用该方法
五.json模式构建对象
【注意】json:是一种数据格式 (键值对:key:value)

//五.json模式构建对象
        var obj = {
             name: '小花', 
             age: '18',
             say: function () {
                console.log(this.name + " 在说话....");
            } };
        obj.say();//小花在说话....

【分析】直接用json模式来创建对象,增加方法,更加简洁

添加方法和属性

一.在原型中添加
构造函数.prototype.属性=function(){}
二.在原型中用 key:value 来集体添加
构造函数.prototype={key:function(),key1:function(),key2:function()}
三.直接在对象实例中添加方法(键值对)

//对象实例
 var person={
            stuName:"lucy",
            say:function(){
                console.log('hi');
            }
        };

        person.age='20';

        person.say();

四.在原型中初始化属性
_init 初始化:添加属性

 //构造函数
        function Person(name,age){
            // this.name=name;
            // this.age=age;
            this._init(name,age);//初始化属性
        }

        //在原型中添加方法
        Person.prototype={
            //初始化  添加属性
            _init:function(name,age){
                this.name=name;
                this.age=age;
            },
            say:function(){
                console.log(this.name+" is speaking...");
            },
            run:function(){
                console.log(this.name+" is running.....");
            }
        };
       p1._init('李花花',40);
        p1.say();

五利用参数添加属性

 //构造函数
        function Person(options){
            this._init(options);//初始化属性
        }

        //在原型中添加方法
        Person.prototype={
            //初始化  添加属性
            _init:function(options){
                this.name=options.name;//定义参数增加属性
                this.age=options.age;
            },
            say:function(){
                console.log(this.name+" is speaking...");
            },
            run:function(){
                console.log(this.name+" is running.....");
            }
        };


        var p1=new Person({age:30,name:'jack'});//用键值对加入属性值

        p1.run();
        

对象冒充

方法**:函数对象都有如下方法
call(obj,parms0,parms1…parmsn)
apply(obj,[值])
obj对象 : 更改后this指向的对象
功能:具有改变this指向的能力
区别:参数类型不一样
使用方法一样

   var s1={
         name:'jack',
         age:18,
         say:function(){
             console.log(this.name+" say:"+'hello world')
         }
     }
     var s2={
        name:'tom',
        age:20,
     }
     s1.say.call(s2);

【分析】s1拥有say方法,而s2没有该方法,如果想让s2调用该方法,则需要改变this指向,调用call()方法,将this指向s2,这样就可以调用这个方法了

  <script>
    //实现数组中找出最大值(将数组指向Math构造函数中的max方法)
    var arr=[200,30,40,500,60];
     var s=Math.max.call(null,200,30,40,500,60);
     console.log(s);
      var s2=Math.max.apply(null,arr);
      console.log(s2);
      //用push方法实现数组拼接
      var arr0=[10,20,30];
      var arr1=[60,70,90];
      arr0.push.apply(arr0,arr1);//apply
      arr0.push.call(arr0,60,70,90);//call
       arr0.push(60,70,90);//push方法
      [].push.apply(arr0,arr1);//
      console.log(arr0);
    </script>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值