前面我们已经讲了构造函数的prototype属性,已知该属性所有构造函数都有,并且我们知道实例对象可以使用原型链上的所有方法。根据这一原理,我们可以给内置的构造函数添加方法实现功能的扩展。
本节使用内置的String构造函数做为案例,其它内置函数同理。
我们知道在String构造函数中有两个方法toUpperCase(),它的作用是将字符串转为大写。假如我们有这样一种需求:将字符串的首字母转为大写。
实现原理如下:
定义一个函数,该函数先将传入的字符串参数转为小写,然后使用slice方法将第一个字符和其余的字符串截取出来,将第一个字符串转为大写,将其余的转为小写,二者连接起来返回。
然后我们把该函数赋值给String构造函数的原型对象,即构造函数.prototype,这样操作以后,我们就可以使用String构造函数来调用该方法,即实现了对String的扩展。
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>面向对象(四) 原型对象应用案例-给原生对象扩展方法</title>
</head>
<body>
<script type="text/javascript">
//定义两个构造函数
String.prototype.todaxiefirst = function(){
//首字母大写
// console.log(this); // this 代表字符串本身
//截取首字母 this.slice(0, 1) 截取其他的 this.slice(1)
//this.slice(0, 1).toUpperCase() this.slice(1).toLowerCase()
//返回结果
return this.slice(0, 1).toUpperCase() + this.slice(1).toLowerCase();
}
console.log("hEllo".todaxiefirst());
</script>
</body>
</html>
以上代码中,可以使用字符串直接调用我们为String添加的to大写方法,实现了首字母大写的需求。
ok,这就是给内置对象扩展功能的实现原理,其实jquery这个插件库就是用该原理开发,它只不过是在window对象上添加了一个$方法而已,由于window上的方法可以省略window,所以调用方式为$()。
|