JavaScript对象基础

对象是什么

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

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

怎么创建对象

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

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。

最后编辑于：2019.12.15 21:39:12