js对象创建及链式调用

一、使用对象的原因

不会污染全局环境，和别人协同合作时，不会互相影响。
所以，尽量使用对象来收编变量。

函数也是全局变量

将函数名保存到变量中，你就很容易发现，函数也是全局变量

function checkName () {
  // 验证姓名
}  
var checkName = function () {
  // 验证姓名
}

二、对象的两种方式

方式一

var checkObject = {
  checkName: function () {
    // 验证姓名
  },
}

方式二

var checkObject = function () {};
checkObject.checkName = function () {
  // 验证姓名
}

三、类和原型

真假对象
新创建的对象和函数并没有任何关系

var checkObject = function () {
  return {
    checkName: function () {
      // 验证姓名
    },
  }
}
var a = checkObject();
a.checkName()

类

var CheckObject = function () {
  this.checkName = function () {
    // 验证姓名
  }
}
var a = new CheckObject();
a.checkName();

原型

var CheckObject = function () {};
CheckObject.prototype.checkName = function () {
  // 验证姓名
}
var a = new CheckObject();
a.checkName();

var CheckObject = function () {};
CheckObject.prototype = {
  checkName: function () {
    // 验证姓名
  },
}
var a = new CheckObject();
a.checkName();

四、函数原生对象

Function.prototype.checkName = function () {
  // 验证姓名
}
var a = function () {};
a.checkName();

var b = new Function();
b.checkName();

上述做法会污染原生对象Function，所以换一种方式添加方法

Function.prototype.addMethod = function (name, fn) {  
  this[name] = fn;
}

var a = function () {};
var b = new Function();

a.addMethod('checkName', function () {
  // 验证姓名
});
b.addMethod('checkEmail', function () {
  // 验证邮箱
});

a.checkName();
b.checkEmail();

五、链式调用

对象

var checkObject = {
  checkName: function () {
    // 验证姓名
    return this;
  },
  checkEmail: function () {
    // 验证邮箱
    return this;
  },
}
checkObject.checkName().checkEmail();

原型

var CheckObject = function () {};
CheckObject.prototype = {
  checkName: function () {
    // 验证姓名
    return this;
  },
  checkEmail: function () {
    // 验证邮箱
    return this;
  },
}
var a = new CheckObject();
a.checkName().checkEmail();

函数原生对象添加方法

Function.prototype.addMethod = function (name, fn) {  
  this[name] = fn;
  return this;
}

var a = function () {};

a.addMethod('checkName', function () {
  // 验证姓名
  return this;
}).addMethod('checkEmail', function () {
  // 验证邮箱
  return this;
});

a.checkName().checkEmail();

网站导航

网站导航