教程 前端-从零开始系列-17:JS 对象详解遇见构造函数

zoeDylan · 2017年11月01日 · 234 次阅读

前端-从零开始系列-17:JS对象详解遇见构造函数

开篇就说了,在JS中,一切皆对象。

为了让新手更好的理解对象,我这里就把对象单独提出来详细解答。

什么是对象?

JS中,对象不是你的男女朋友和左右手。

JSObject是一个基本类型,无序集合,是由键值对组成的一个函数。

对象可以包括StringObjectfunction

示例:

var user = {
    name:'time',
    age:18,
    sex:false,
    hobby:['上刀山','下火海'],
    getSize:function(){
        return [10,30,20]
    }
   }

对象创建

前面讲到过,对象创建的三种方式:

  1. 空对象 var a = {}; var b = Object(); var c = new Object;
  2. 带值对象
var a = {
   a1:1,
   a2:2
}
var b = Object({
  b1:1,
  b2:2
});
var c = new Object({
  c1:1,
  c2:2
});
  1. 其它类型对象
var a = '1123';//string
var b = [1,2,3];//array
var c = function(){} // function

对象创建后都有自己的原生属性和自定义属性或方法.

示例:

<script>
var a = 'a1b2c3';
document.write(a.replace(/a/,'A'));//把a替换成大写
</script>

上面示例中,replace就是String类型对象的自带方法。

对象访问

在浏览器环境下,所有创建的全局变量都在window这个对象下面。

示例

<script>
var a = 'abc';
document.writeln(window['a']);
document.writeln(window.a);
</script>

示例输出后可以看到,使用[对象名].都能对a进行取值。

示例:自定义对象

<script>
var user = {
    name:'time',
    age:18,
    sex:false,
    hobby:['上刀山','下火海'],
    getSize:function(){
        return [10,30,20]
    }
   };
   document.writeln(user['name']);
   document.writeln(user.age);
   document.writeln(user['getSize']());
</script>

对象操作

  1. 修改、删除值

修改对象的值只需要object.** = value;

删除使用delete关键字:

var a = {a1:123};

delete a.a1;
  1. 拷贝

这个主要针对于:ObjectArray,为什么要单独将一下拷贝。

示例:

<script>
    var a = [1, 2, 3];
    var b = a;
    b[0] = 111;
    document.write(a[0]);
</script>

示例运行后可以看到,我们改变b的值,a里面的也有改变,也就是说ab两个变量有关联,这个和拷贝的意思有点区别。

所以这个的拷贝需要用到一个:js深拷贝和浅拷贝

构造函数

构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象。

书面的解释看不懂,简单点说就是需要new的函数.

function user(){
    this.name = 'name';
    this.age = 'age';
}
var u1  = new user();

u1.name;//name
u1.age;//age

构造函数new后和我们平时创建带值对象一样:

var u1 = {
    name :'name' ,
    age : 'age'
}

u1.name;//name
u1.age;//age
暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册