javascript继承机制 & call apply使用说明
一、继承机制
1、对象冒充:构造函数使用 this 关键字给所有属性和方法赋值,可使 ClassA 构造函数成为 ClassB 的方法,然后调用它。
function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod; this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}
这里存在一个弊端,如果存在两个类 ClassX 和 ClassY 具有同名的属性或方法,ClassY 具有高优先级。因为它从后面的类继承。除这点小问题之外,用对象冒充实现多重继承机制轻而易举。
2、apply()、 call() 方法是与经典的对象冒充方法最相似
function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//delete this.newMethod;
ClassA.call(this, sColor); this.name = sName;
this.sayName = function () {
alert(this.name);
};
}
3、原型链
function ClassA() { }
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB() { }
ClassB.prototype = new ClassA();
Object.extend = function(destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
除此之外,还有种方法,就是:Function.apply或者Function.call。 通过 call() 或 apply() 方法可以设置 this 的值, 且作为已存在对象的新方法调用。
使用场景:
1、 arguments 转换为数组
// 返回的是数组,但是arguments本身保持不变
vararg=[].slice.call(arguments);
//[].slice.call(document.getElementsByTagName('li'));
2、借用
var foo = {
name: 'joker',
showName: function() {
console.log(this.name);
}
}
var bar = {
name: 'rose'
}
foo.showName.call(bar);
3、继承
var Student = function(name, age, high) {
// use call
Person.call(this,name,age);
this.high=high;
}
Person.apply(this,arguments);
this:在创建对象在这个时候代表的是student
arguments:是一个数组,也就是[“qian”,”21”,”一年级”];
用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面
4、 封装对象时保证this的指向
var _this = this;
_this.$box.on('mousedown', function() {
return _this.fndown.call(_this);
})
5、代码优化
返回数组最大值
alert(Math.max(,)) //
alert(Math.max(,,,,,)) //
alert(Math.max([,,,])) // 找出数组中最大的元素,这样却是不行的。 function getMax(arr){
var arrLen=arr.length;
for(var i=,ret=arr[];i<arrLen;i++){
ret=Math.max(ret,arr[i]);
}
return ret;
} //这样写麻烦而且低效。如果用 apply呢
function getMax2(arr){
return Math.max.apply(null,arr);
}
//两个数组拼接,要把 arr2展开,然后一个一个追加到arr1中去
var arr1=[,,];
var arr2=[,,];
arr1.push(arr2)//[1,3,4,[3,4,5]]显然不行
//只能用一个循环去一个一个的push(当然也可以用arr1.concat(arr2),但是concat方法并不改变arr1本身)
var arrLen=arr2.length
for(var i=;i<arrLen;i++){
arr1.push(arr2[i]);
}
//使用apply,arr1执行push方法,arr2作为参数传入。arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合
Array.prototype.push.apply(arr1,arr2)
function add(a, b){console.dir(this);}
function sub(a, b){console.dir(this);}
add(,); //"Window"
sub(,); //"Window"
add.call(sub, , ); //"sub(a, b)"
sub.apply(add, [, ]); //"add(a, b)"
javascript继承机制 & call apply使用说明的更多相关文章
- 【JavaScript】重温Javascript继承机制
上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...
- javascript继承机制的设计思想(ryf)
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
- 转:Javascript继承机制的设计思想
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
- Javascript继承机制的设计思想
转自:http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.htm ...
- Javascript继承机制总结 [转]
转自:http://bbs.csdn.net/topics/260051906 Javascript继承 一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下J ...
- javascript 继承机制设计思想
作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_java ...
- JavaScript 继承机制小记
读<JavaScript: the good parts>, 关于对象继承这块小记一笔: function Base(v){ this.baseValue = v; this.getBas ...
- Javascript继承机制的设计
写软工作业时各种蛋疼:主要在于Javascript没有“子类”“父类”“接口”的概念,只能使用prototype来实现,看了下面一篇文章,感觉写得很不错~ http://www.ruanyifeng. ...
- Javascript prototype 及 继承机制的设计思想
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
随机推荐
- 转 【.NET平台下使用MongoDB入门教程】
目录 一.了解MongoDB 二.MongoDB特点 三.安装及常用命令 3.1 下载安装 3.2 启动服务器 3.3 常用操作 3.4 其他命令 3.5 做成windows服务 四.批处理程序开启M ...
- 访问需要HTTP Basic Authentication认证的资源的各种开发语言的实现
什么是HTTP Basic Authentication?直接看http://en.wikipedia.org/wiki/Basic_authentication_scheme吧. 在你访问一个需要H ...
- Print之modile, level
一般print打印的design都会引入module, level. xxxprint(module, level, arg,...)... 每个Module都可以有各自的bitmap,代表这个mod ...
- matlab读图函数
最基本的读图函数:imread imread函数的语法并不难,I=imread('D:\fyc-00_1-005.png');其中括号内写图片所在的完整路径(注意路径要用单引号括起来).I代表这个图片 ...
- 【bzoj1596】[Usaco2008 Jan]电话网络 树形dp
题目描述 Farmer John决定为他的所有奶牛都配备手机,以此鼓励她们互相交流.不过,为此FJ必须在奶牛们居住的N(1 <= N <= 10,000)块草地中选一些建上无线电通讯塔,来 ...
- BZOJ4709 JSOI2011柠檬(动态规划)
首先要冷静下来发现这仅仅是在划分区间.显然若有相邻的数字相同应当划分在同一区间.还有一个显然的性质是区间的两端点应该相同且选择的就是端点的数.瞬间暴力dp就变成常数极小100002了.可以继续斜率优化 ...
- 判断form表单每个input字段是否有内容
//---------------------------------------------------input失去焦点时判断是否有值 btn_click: function () { //inp ...
- HTTPS证书生成方法,也适用于APP
步骤: 一.登录服务器,创建ioscert目录 cd ~/servers/APP mkdir ioscert 二.cd到ioscert目录下,执行以下命令: 1.openssl genrsa -out ...
- Myhchael原创题系列 Mychael vs Kid 【题解】
题目链接 Mychael vs Kid 题解 先说说这题的由来及前身 前身 首先有一个很经典的题目: 维护区间加,查询区间\(gcd\) 如果强行用线段树维护的话,区间加之后就没法直接确定当前区间的\ ...
- PHP汉字转拼音
<?php/** *+------------------------------------------------------ * PHP 汉字转拼音 *+----------------- ...