javascript--自定义对象

2023-10-20 10:11:57 浏览数 (1)

前言

JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表、字典、健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象。这种方式不能用new方式创建,所以不可重用。

字面量方式-最简单方式

这种创建对象的方式通过{}来组织对象属性和方法。

代码语言:javascript复制
var emptyObj = {
    'id': 1,   //注意是逗号
    'name': 'zhagnsan',
    'fn1': function(){
        //使有 this 调用方法
        this.fn2()
        //"此处是js对象的方法,可以写不限个,注意冒号,逗号"
        alert(this.id);        //同样可以用this方法。
    },
    'fn2': function(){
        alert(this['id']);//以集合的方式访问。
    }
};

对象的方法调用

代码语言:javascript复制
emptyObj.fn1();
emptyObj.fn2();

绑定: 如果使用这种方式进行绑定,则需要进行一次方法调用,才会生效,不像之前任意放在 script 代码块中就可以生效的 对象要用自己的方法,使用 this 进行调用。

构造函数方式

可重用,先像Java一样创建一个对象的模板,然后new一个出来。this在里面的用法一样的。 第二种创建对象的方式。 这种方式就像Java一样,先创建一个对象的模板:

定义一个js类

代码语言:javascript复制
function myClass(){
    this.id = 5;
    this.name = 'myClass';
    this.getName = function(){
        alert(this.name);
        return this.name
    }
}

创建对象:

代码语言:javascript复制
var my = new myClass();
my.getName();
alert(my.id);

工厂方式

返回一个对象给函数

代码语言:javascript复制
// 定义一个工厂函数
function myClass() {
  var obj = {
      'id':2,
      'name':'myclass'
  };
  return obj;
}

function _myClass() {
  var obj = new Object();
  obj.id = 1;
  obj.name = '_myclass';
  return obj;
}

打印一下:

代码语言:javascript复制
var my = new myClass();
var _my = new _myClass();
alert(my.id);
alert(my.name);
alert(_my.id);
alert(_my.name);

带参方式

在使用百度地图API时,碰到一种调用方式,没有见过有一时搞不明白是怎么回事。研实了一下才明白。 js中使用this时可以直接指向方法名,不需要加()。 new 出来的对象调用方法属性时,要看构造函数中的this是指向谁的,注意。

构造函数的this的用引指向,直接影响到new 的时候的指针引用。

代码语言:javascript复制
function fun(e) {
    alert(e);
}

function test(value, fun) {
    this.value = value;
    this.fun = fun;                //指向形参
}
var funTest = new fun("aaaa");
var obj = new test(11, funTest);
obj.fun();

匿名函数方式,匿名函数指向当前匿名函数。

代码语言:javascript复制
function fun(e) {
    alert(e "2");
}

function test(value, fun) {
    this.value = value;
    this.fun = fun;                //指向形参
}

var obj = new test(22, function(e){
    alert(e "1");
});
obj.fun("aaaaaaaaaaa")

结果打印:aaaaaaaaaaa1

改变构造函数中的this指向,new的对象指向名部方法。

代码语言:javascript复制
function fun(e) {        //指向这里
    alert(e "2");
}

function test(value, ttt) {
    this.value = value;
    this.fun = fun;
                //!!!!注意,指向的是fun方法,ttt参数没有起做用,在局部没有找到变量,则直接找表达式右边的方法名。
}
var obj = new test(22, function(e){
    alert(e "1");
});
obj.fun("aaaaaaaaaaa");

结果打印:aaaaaaaaaa2

总结:实际应用中不要出现this引用不清楚的清况。

0 人点赞