JavaScript设计模式基础之this、call、apply
1.this的指向
除去不常用的with和eval,具体应用中this指向大概能分为4种情况分别是
1.作为对象的方法调用。
2.作为普通函数的方法调用。
3.Function.prototype.call或Function.prototype.appy
1.如果作为对象方法的调用,this是指向该对象:
let obj = {
objName:'obj',
objThis(){
alert(this.objName);
}
}
obj.objThis();
输出如下:
对象obj里面的方法objThis的this是指向该对象
2.作为普通函数调用,this指向全局对象也就是window对象
var objName = 'window';
// let obj = {
// objName:'obj',
// objThis(){
// alert(this.objName);
// }
// }
function objThis(){
alert(this.objName);
}
objThis();
输出:
函数里面的this默认指向全局window
3.构造器调用(es6类调用),this指向实例化对象
class Obj{
constructor(str,nub){
this.str = str;
this.nub = nub;
}
num(){
console.log(this.str,this.nub,this)
}
}
//类实例
let obj = new Obj('hello',123);
obj.num();
输出:
this输出的是类的实例对象 构造函数或者类中this指向自身实例
总结:在谁里面使用this,this指向谁
2.call和apply
1.区别
appy接收2个参数,第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可以为类数组,appy方法吧这个集合中的原生
作为参数传递给呗调用的函数。
call传入的参数数量不固定第一个参数和apply相同,后面的每个参数依次传入只是不是以集合的方式而是参数的方式
//apply
let apply1 = function(){
alert(arguments)//输出[1,2,3]
}
apply1.apply(null,[1,2,3])
//call
let call1 = function(){
alert(arguments)//输出[1,2,3]
}
call1.call(null,1,2,3)
call是包装在apply上面的语法糖,如果我们传入的第一个参数是null,那么函数体内的this会默认指向宿主对象,在浏览器中就是全局window
call和apply能改变this指向和借用其他对象的方法 这里就不一一阐述了 网上特别多
为后面的设计模式做基础 是必须会的
JavaScript设计模式基础之this、call、apply的更多相关文章
- JavaScript设计模式基础(二)
JavaScript 设计模式基础(一) 原型模式 在以类为中心的面向对象编程语言中,类和对象的关系就像铸模和铸件的关系,对象总是从类中创建.而原型编程中,类不是必须的,对象未必从类中创建而来,可以拷 ...
- JavaScript设计模式基础(一)
模式的起源 模式 起源于建筑学.20世纪70年代,哈佛大学建筑学博士Christopher Alexander和他的团队花大约20年,来研究为解决同一个问题而设计出的不同建筑结构,从中发现那些高质量设 ...
- JavaScript设计模式基础之面向对象的JavaScript(一)
动态语言类型与鸭子类型 此内容取自JavaScript设计模式与开发实践一书 编程语言按照数据类型大体可以分为2类,一类就是静态类型语言,另一类则是动态类型语言 静态类型语言也可以称之为编译语言,而动 ...
- JavaScript设计模式基础之闭包(终)
对于前端程序员来说闭包还是比较难以理解的, 闭包的形成与变量的作用域以及变量的生产周期密切相关,所以要先弄懂变量的作用域和生存周期. 1.变量作用域 变量的作用域,就是指变量的有效范围,通常我们指的作 ...
- JavaScript设计模式基础之面向对象的JavaScript(二)
多态 多态的实际含义:同一操作作用与不同的对象上面,可以产生不同的解释和不同的执行结果,就是说,给不同的对象发送同一个消息 的时候,这些对象会根据这个消息分别给出不同的反馈 代码如下: class D ...
- 《JavaScript设计模式与开发实践》读书笔记-基础知识
笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...
- Javascript设计模式学习一
学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识.this等重要概念,以及掌握一些函数式编程的技巧. Js多态 多态的思想:实际上是把“做什么”和“谁去做”分离开来.例 ...
- 转载,javascript 设计模式
了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...
- 【JavaScript设计模式系列---开篇预览】
转:http://www.cnblogs.com/Darren_code/archive/2011/08/31/JavascripDesignPatterns.html 2011-08-31 23:5 ...
随机推荐
- Swift3.0 控制流
常用的一些判断方式 //for in let numberList = [, , , , ] //获取第一个元素 !拆包 print(numberList.first!)//1 //获取最后一个元素 ...
- 51nod 1268【dp】
思路: 很水的dp吧...问的都是能否组成.. 哦对,这里sum最大才2e7,不会是2e9所以放心dp #include<cstdio> #include <map> #inc ...
- POJ2576【背包】
题意: 每个人必须在一个团队或其他; 人对两支球队的数量不得超过1不同; 人们对各队的总重量应尽可能接近相等越好. 思路: 那么我求一个能接近最接近总和一半的值. 每个人的值就是物品,每个物品有且只有 ...
- hdoj1007【几何】【未完待续】
题意: 在一个平面上有n(1e5)个点,然后求一个圆来包住这些点,求这个圆的最小半径. 思考: 要使一个圆直接包了这些点,没有任何思路..
- python 合集set,交集,并集,差集,对称差集别搞混
有集合 x与y x = {1,2,3,4,5}y = {4,5,6,7,8} x和y的交集为 {4,5} x和y的对称差集{1, 2, 3, 6, 7, 8} x和y的并集{1, 2, 3, 4, 5 ...
- NOIp2016 蚯蚓 【二叉堆/答案单调性】By cellur925
题目传送门 $Sol$ $50pts$:我们考虑$q==0$的情况,每次在所有的蚯蚓中找到一只长度最大的,这非常二叉堆.所以我们可以用一个优先队列,随便水一下就有50分.($NOIp$的分真这么好拿? ...
- multiprocessing多进程模块
1 基本理解 python不支持真多线程,无法在单进程中调用多核cpu.对于cpu密集型任务,可以使用多进程.python会调用OS原生多进程,运行在多核上,以此提高运行速度. 2 基本实现 impo ...
- python之迷宫BFS
# @File: maze_queue_bfs from collections import deque maze = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0 ...
- Codeforces Round #402 (Div. 2) C
Description Igor found out discounts in a shop and decided to buy n items. Discounts at the store wi ...
- AO-XXXX
一 AO4419:应用于开关应用或PWM应用的场效应管.