深入理解JS的对象

news/2024/7/11 1:32:49 标签: jQuery

现在做项目基本是套用框架,不论是网上的前端还是后端框架,也会寻找一些封装好的插件拿来即用,但还是希望拿来时最好自己过后再回过头了解里面的原理,学习里面优秀的东西,不论代码封装性,还是小到命名。

好吧,扯远了,在这里要讲的是大家前端用得多的JS,可能接触最多的是Jquery,但原生的JS最好还是要了解的,至少能看懂别人的代码,然后学习。

平时用得多的无非是if for 逻辑处理字符串,截断字符串,数组,然后是查找元素,对元素背景什么的属性操作,这些都是些实用性上的东西,这里讲一些更深入点的,如何理解Javascript对象。

C#,Java都是面象对象的语言,但JavaScript本身不是面向对象的语言,而是基于对象的语言。 JavaScript中所有事物都是对象, 包括字符串、数组、日期、数字,甚至是函数(验证方法是你可以在实例上 . 出属性)。

基于这点我们可以封装自己的插件,这里就不讲怎么制作插件了,想了解的可查询我的如何制作插件的文章。

创建对象,平时用到的方法:

var emptyObject1 = {};           //创建空对象
var emptyObject2 = new Object(); //创建空对象
var person = {"name":"sdcyst",
          "age":18,
          "sex":"male"};     //创建一个包含初始值的对象person
alert(person.name);              //sdcyst
alert(person["age"]);            //18

注意上面如何访问一个对象的属性,通过"."操作符获取对象的属性,必须得知道属性的名字.一般来说"[]"操作符获取对象属性的功能更强大一些,可以在[]中放入一些表达式来取属性的值,比较有灵活性,如 name["name" (i 1)];

delete操作符可以删除对象中的某个属性,判断某个属性是否存在可以使用"in"操作符,需要注意的是对象中的属性是没有顺序的。

var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};
var namestring = "";
for(var props in name) {  //循环name对象中的属性名字
    namestring  = name[props];
}
alert(namestring);  //NAME1NAME2NAME3NAME4
 
delete name.name1;  //删除name1属性
delete name["name3"];  //删除name3属性
namestring = "";
for(var props in name) {  //循环name对象中的属性名字
    namestring  = name[props];
}
alert(namestring);  //NAME2NAME4
 
alert("name1" in name); //false
alert("name4" in name); //true

接下来讲讲比较常见的数组,对象是无序数据的集合,而数组则是有序数据的集合,数组中的数据(元素)通过索引(从0开始)来访问,数组中的数据可以是任何的数据类型,数组本身仍旧是对象,创建数组可以用"[]"操作符,或者是用Array()构造函数来new一个。

var array1 = [];  //创建空数组
var array2 = new Array();  //创建空数组
array1 = [1,"s",[3,4],{"name1":"NAME1"}]; //
alert(array1[2][1]);  //4   访问数组中的数组元素
alert(array1[3].name1); //NAME1 访问数组中的对象
alert(array1[8]);   //undefined
array2 = [,,];  //没有数值填入只有逗号,则对应索引处的元素为undefined
alert(array2.length); //3
alert(array2[1]);     //undefined

需要注意的是var array = new Array(10);初始化的长度10实际上对数组没有任何的约束力,数组的长度是可以任意改变的。

delete操作符删除数组的元素,注意这个删除仅仅是将数组在该位置的元素设为undefined,数组的长度并没有改变。

var array = new Array("n1","n2","n3","n4","n5");  //五个元素的数组
var astring = "";
for(var i=0; i<array.length; i  ) {           //循环数组元素
    astring  = array[i];
}
alert(astring);       //n1n2n3n4n5
delete array[3];                   //删除数组元素的值
alert(array.length   "_"   array[3])  //5_undefined
array.length = 3;    //缩减数组的长度
alert(array[3]);     //undefined
array.length = 8;    //扩充数组的长度
alert(array[4]);     //undefined

对象中也离不开函数,那如何创建函数:
  function f(x) {........}
  var f = function(x) {......}
上面这两种形式都可以创建名为f()的函数,不过后一种形式可以创建匿名函数。

方法的调用需要对象的支持,那么在方法中如何获取对象的属性呢?this!this关键字我们已经很熟悉了,在javascript的方法中,我们可以用this来取得对方法调用者(对象)的引用,从而获取方法调用者的各种属性。

var obj = {"name":"NAME","sex":"female"};
obj.print = function() {  //为对象添加方法
    alert(this.name   "_"   this["sex"]);
};
obj.print();  //NAME_female
obj.sex = "male";
obj.print();  //NAME_male

来一个更加面向对象的例子。

var person = {name:"defaultname",
              setName:function(s){
              this.name = s;
          },
          "printName":function(){
              alert(this.name);
          }}
person.printName();       //defaultname
person.setName("newName");
person.printName();       //newName

下面更深入点,每一个函数都包含了一个原型(prototype),我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝。

通过prototype创建自定义对象的一个例子:

// 构造函数
        function Person(name, sex) {
            this.name = name;
            this.sex = sex;
        }
        // 定义Person的原型,原型中的属性可以被自定义对象引用
        Person.prototype = {
            getName: function() {
                return this.name;
            },
            getSex: function() {
                return this.sex;
            }
        }

对象(实例化类)

var zhang = new Person("ZhangSan", "man");
console.log(zhang.getName());   // "ZhangSan"
当代码var zhang = new Person("ZhangSan", "man")执行时,其实内部做了如下几件事情:

1.创建一个空白对象(new Object())。
2.拷贝Person.prototype中的属性(键值对)到这个空对象中(我们前面提到,内部实现时不是拷贝而是一个隐藏的链接)。
3.将这个对象通过this关键字传递到构造函数中并执行构造函数。
4.将这个对象赋值给变量zhang。

上面我们提到了用new来创建一个对象的过程,事实上在这个过程中,当创建了空对象后,new会接着操作刚生成的这个对象的prototype属性。

每个方法都有一个prototype属性(因为方法本身也是对象),new操作符生成的新对象的prototype属性值和构造方法的prototype属性值是一致的。构造方


法的prototype属性指向了一个prototype对象,这个prototype对象初始只有一个属性constructor,而这个constructor属性又指向了prototype属性所在的方
法。有点晕,看下面的图:

这样,当用构造函数创建一个新的对象时,它会获取构造函数的prototype属性所指向的prototype对象的所有属性。对构造函数对应的prototype对象所做的任何操作都会反应到它所生成的对象身上,所有的这些对象共享构造函数对应的prototype对象的属性(包括方法)。
看个具体的例子吧:

function Person(name,sex) {  //构造函数
    this.name = name;
    this.sex = sex;
}
Person.prototype.age = 12;   //为prototype属性对应的prototype对象的属性赋值
Person.prototype.print = function() { //添加方法
    alert(this.name "_" this.sex "_" this.age);
};
var p1 = new Person("name1","male");
var p2 = new Person("name2","male");
p1.print();  //name1_male_12
p2.print();  //name2_male_12
Person.prototype.age = 18;  //改变prototype对象的属性值,注意是操作构造函数的prototype属性
p1.print();  //name1_male_18
p2.print();  //name2_male_18

在javascript中,所有的方法都有一个call方法和apply方法。这两个方法可以模拟对象调用方法,它的第一个参数是对象,后面的参数表示对象调用这个方法时的参数。概念比较拗口,平时很少遇到,所以用得少,比较难得理解这里就不作过多的讲解了,请自行查找说得更明了的文章来了解吧。

再来一次前后照应,连JS都有对象,你为什么没有?!!!(说好的不要打脸……)

 


http://www.niftyadmin.cn/n/1732353.html

相关文章

setInterval与clearInterval详解

计时计数器经常会用到的两个函数。 首先注意&#xff1a;setInterval与clearInterval都是直属于window对象的。 时间间隔可以通过setInterval命令来创建并用clearInterval命令来终止。 setInterval所用的参数有两种格式&#xff1a; 代码一&#xff1a; <div id"oD…

jquery中each函数的详细用法

each()函数是基本上所有的框架都提供了的一个工具类函数&#xff0c;通过它&#xff0c;你可以遍历对象、数组的属性值并进行处理。jQuery和jQuery对象都实 现了该方法&#xff0c;对于jQuery对象&#xff0c;只是把each方法简单的进行了委托&#xff1a;把jQuery对象作为第一个…

记住 ,!important与#62;

margin-top:0px!important;>margin-top:0px!important;margin-top:16px; 现在IE6和IE7以及FF对盒模型解释大致是一致的&#xff0c;都是盒实际宽度盒内容宽度内补丁值边框宽度。主要差异还是在一些细节上。比如IE6.0的margin双倍问题&#xff0c;这样的话在写CSS或搭建XHTML…

像高手一样编写属于自己的jQuery插件

在编写本文中的插件时&#xff0c;我发现插件的创建过程以及用来创建它的框架非常简单明了。困难的地方在于想一些其他人还没有做过的事情&#xff0c;并编写一些能真正完成某些操作的 JavaScript 代码。由于插件结构简单明了&#xff0c;对于新手它简单易学&#xff0c;对于高…

CSS的position:fixed的使用

接触CSS已有相当长一段时间&#xff0c;我们竟然没有留意position:fixed的用法。 我们都知道CSS中定位属性position的值&#xff0c;除了默认的值外&#xff0c;还有absolute,relative和fixed。我平时比较常用absolute和relative&#xff0c;而position:fixed却没多关注。或许是…

关于jquery ajax加载数据的问题

今天在改博客几个样式的时候&#xff0c;以为很自然的加上js就可以实现了&#xff0c;没想到那个是ajax加载的数据&#xff0c;而非页面首次加载的&#xff0c;比如下面的 “提交评论” 按钮&#xff0c;右侧的 搜索按钮 等。我很自然的写了 文本$("#btn_comment_submit&q…

让IE6也支持position:fixed

众所周知IE6不支持position:fixed&#xff0c;这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天遇到了这个问题。当时就简单的无视了IE6&#xff0c;但是对于大项目或商业网站&#xff0c;如果有用到这个属性的时候&#xff0c;是不可能直接无视的。 如何让p…

使用Jquery实现Checkbox全选功能

使用jQuery 实现全选非常简单&#xff0c;下边我们就看看如何实现jQuery 全选。假设在页面中有如下标签&#xff1a; 全选<input id"all" type"checkbox" value"" /> 投资<input id"Checkbox1" type"checkbox" nam…