程序员

WEB前端技术核心:JaveScript学习之旅(对象小知识点剖

2018-06-27  本文已影响0人  phoenixYU

对象在JavaScript中是很常见的,所有的事物都可以称为对象,包括数组、字符串、布尔值等等。对象是包含了属性和方法的是一个容器。例如你在游戏里创建了一个新角色,那这个角色就相当于你定义了一个对象,角色的姓名,性别,身高,肤色等等都是这个对象的属性,而当你操作这个角色进行行走奔跑跳跃,就是执行这个对象的方法。由此可见,属性是与对象相关的值,方法是能够在对象上执行的动作。

了解了对象的基本概念,继续来围观对象的创建方法。

var obj = {};这种简单暴力的创建方法叫做对象字面量,一个对象的字面量就是包裹在花括号中的值或者方法。例如:

var obj = {

color :“red”,

width :“100”,

height :“150”,

当一个对象定义了一些属性和方法后,如果想增加一个属性或者查看一个属性值等,就涉及到很重要的四个字“增删改查”,用上述例子做参考,增,就是增加一个属性,如果我还想增加一个重量的属性,可以这样写:

var obj = {

color :“red”,

width :“100”,

height :“150”,

obj.weight = “20”;

这个语句中的点就相当于引用,很多时候,在控制台是可以看见关键信息的,例如这些属性值,可在控制台打印,而document.write不会显示。以此类推,如果是查,那在后面加一句你要查看的属性名:

console.log(obj.color);

此时控制台就会打印出red。

修:修改的话直接在后面更换原属性值,如:

obj.color = “yellow”;

console.log(obj.color);

此时原先的颜色属性值红色就被改为黄色了。

增删改查中唯一一个有点异于常人的就是“删”。对象的属性是可以删除的,但是不像其他三个那样:(对象名.属性名)之类,而是需要借助一个操作符:delete。

delete obj.width

delete操作符在前,后面跟着对象的属性,就会删除这一属性。

接下来分析第二种创建方法,构造函数。

构造函数分为两种,第一种是系统自带的构造函数,构造函数的方法的定义是object(),此为系统自带。

加一个new,就可以返还一个真正的对象,即new object(),返还需要接受,所以这里需要声明一个变量接收,即基本写法为:

var obj = new object();它与var obj = {};没有区别。

构造函数依然可以自己增加属性,

var obj = new object();

obj.color = “red”;

obj.width = “100”;

第二种构造函数是自定义的:

function Obj(){

};结构上与函数没有任何区别,为了后期让人能辨别此为构造函数,所以命名时候第一个字母大写。自定义的构造函数执行成一个对象需要加new,并且也需要声明一个变量接收这个对象。

var obj = new Obj();

注意函数名,函数名首字母大写。

自定义函数的作用非常大,例如可以传参。

function Obj(color){

    Obj.color = color;

var obj  = new Obj(“yellow”);

上述例子中,创建了构造函数,并且写了一个形参color,函数体内color属性等于这个形参,当外界有实参进来,那color属性就会跟着改变。对象中对象名称还可以用this代替,this在对象的内容里表示当前的对象。如:

function Obj(color){

      this.color = color;

      this.width = “100”;

      this.height = “150”;

var obj = new Obj(“yellow”);

与上面那个效果一样。这里的this就是指当前的对象。

加了new的构造函数就会执行并返回一个对象的原因是new操作符相当于在函数体内最顶端创建了一个空对象,用上述例子阐述。有了new后,函数体中就创建了一个隐式的空对象var this = {};在活动对象里也就有了这个空对象,程序执行函数里的代码时候,就相当于在这个空对象里加color、width、height这些属性,到最后函数体里代码执行完,就会隐式return这个this。即生成了一个对象返回出来。new操作符带来的变化总结为三个步骤,1:创建空对象2:给对象增加属性赋值3:返回,且整个过程都是隐式。

但凡使用new操作符,返回必须是对象值,不可以是原始值(Undefined、Null、Boolean、Number、string)。

原始值是没有属性和方法的,

var test = 123;

test.color = “black”;

console.log(test.color)

刚说过原始值是不可能有属性和方法的,但是上述例子就是一个原始值,且加了一个属性,还不报错,这种过程叫做包装类。增加一个属性时候,程序隐式的自动转换一个数字对象:

new Number(123).color =“black” delete转换完即销毁并不保存,当你下一次访问时候,再继续进行一次转会,因为这两次创建的对象并不是同一个,所以当你调用这个属性值时候,系统会返回undefined。在这里特别提到一点,string.length是可以执行的,原理一样,转换成字符串对象。

上一篇下一篇

猜你喜欢

热点阅读