美文网首页
JavaScript对象基础

JavaScript对象基础

作者: whisper330 | 来源:发表于2019-12-15 21:35 被阅读0次

    对象是什么

    对象是一个包含相关数据和方法的集合,通常由一些变量和函数组成,我们称之为对象里面的属性和方法。

    面向对象的编程可以理解为,把一切看做成东西,这个东西有他自己的属性和功能。

    怎么创建对象

    常见的创建方法有以下几种。

    1.Object构造函数创建
    var obj = new Object();
    obj.member1Name = member1Value;
    obj.member2Name = member2Value;
    obj.member3Name = member3Value;
    //用Object引用类型创建一个新实例,然后保存在obj中
    
    2.对象字面量表示法
    var obj= {
      member1Name : member1Value,
      member2Name : member2Value,
      member3Name : member3Value
    }
    
    3.用构造函数创建对象
    function obj(arguments) {
      this.member1Name = member1Value;
      this.member2Name = member2Value;
      this.member3Name = member3Value;
    }
    
    4.工厂模式创建
    function myfun(arguments) {
      var obj = new Object();
      obj.member1Name = member1Value;
      obj.member2Name = member2Value;
      obj.member3Name = member3Value;
      return obj;
    }
    var obj1 = myfun(arguments);
    

    怎么访问对象

    • 点表示法
      当你想访问对象里面的属性的时候,将对象的名字后面加上一个点,后面加上你要访问的属性名称。如下所示:
    obj.member1Name
    obj.member1Name[1]
    obj.member1Name()
    
    • 括号表示法
      另外一种是用括号将属性括起来,按层级关系依次排列在对象的后面(注意要用引号包裹起来哦)。如下所示:
    obj[“member1Name”]
    obj[”member1Name”][”submember1Name”]
    
    • 括号表示法的优点
      1.在程序运行时创建和修改属性。
    obj = {};
    for (var i = 0; i < 4; i++) {
      obj["name"+i] = i;
    }
    console.log(obj); //=>
    {name0: 0, name1: 1, name2: 2, name3: 3}
    

        2.可以通过变量来进行访问。

    var propertyName = 'member1Name';
    console.log(obj[member1Name]);  
    

    对象中的this

    this可以理解为一个指针,它的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁。

    实际上this的最终指向的是那个调用它的对象,更精确的说,this永远指向的是最后调用它的对象

    接下来我们从三种调用方式分别来阐述this在该情况下的指向。
    1.作为对象来调用:this被绑定到该对象

    var point = {
    x : 0,
    y : 0,
    moveTo : function(x, y) {
        this.x = this.x + x;
        this.y = this.y + y;
        }
    };
    point.moveTo(1, 1)//this 绑定到当前对象,即 point 对象
    

    2.作为函数来调用:函数被直接调用绑定到全局对象

    function makeNoSense(x) {
    this.x = x;
    }
    makeNoSense(5); //=>这里等效为 window.makeNoSense(5);
    x;// x 已经成为一个值为 5 的全局变量
    

    对于内部函数,即声明在另外一个个函数体内的函数,也会绑定到全局。

    var point = {
    x : 0,
    y : 0,
    moveTo : function(x, y) {
        // 内部函数
       var moveX = function(x) {
       this.x = x;//this绑定到了全局
       };
       // 内部函数
       var moveY = function(y) {
       this.y = y;//this 绑定到了全局
       console.log(this); //=>window
       };
       console.log(this);
       moveX(x);
       moveY(y);
       }
    };
    point.moveTo(1, 1);
    point.x; //==>0
    point.y; //==>0
    x; //==>1
    y; //==>1
    

    如果我们其实是想把point里面的x,y改变,可以这么做:

    var point = {
    x : 0,
    y : 0,
    moveTo : function(x, y) {
         var that = this; //=>用变量把this保存起来
        // 内部函数
        var moveX = function(x) {
        that.x = x;
        };
        // 内部函数
        var moveY = function(y) {
        that.y = y;
        }
        moveX(x);
        moveY(y);
        }
    };
    point.moveTo(1, 1);
    point.x; //==>1
    point.y; //==>1
    

    3.作为构造函数调用: 构造函数中的this指向新创建的对象本身

    function showName() {
     this.name = "showName function"; 
    } 
    var obj = new showName(); 
    console.log(obj.name); //showName function
    

    上述代码中,我们通过new关键字创建一个对象的实例,new关键字可以改变this的指向,将这个this指向对象obj。

    相关文章

      网友评论

          本文标题:JavaScript对象基础

          本文链接:https://www.haomeiwen.com/subject/cuelnctx.html