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的更多相关文章

  1. JavaScript设计模式基础(二)

    JavaScript 设计模式基础(一) 原型模式 在以类为中心的面向对象编程语言中,类和对象的关系就像铸模和铸件的关系,对象总是从类中创建.而原型编程中,类不是必须的,对象未必从类中创建而来,可以拷 ...

  2. JavaScript设计模式基础(一)

    模式的起源 模式 起源于建筑学.20世纪70年代,哈佛大学建筑学博士Christopher Alexander和他的团队花大约20年,来研究为解决同一个问题而设计出的不同建筑结构,从中发现那些高质量设 ...

  3. JavaScript设计模式基础之面向对象的JavaScript(一)

    动态语言类型与鸭子类型 此内容取自JavaScript设计模式与开发实践一书 编程语言按照数据类型大体可以分为2类,一类就是静态类型语言,另一类则是动态类型语言 静态类型语言也可以称之为编译语言,而动 ...

  4. JavaScript设计模式基础之闭包(终)

    对于前端程序员来说闭包还是比较难以理解的, 闭包的形成与变量的作用域以及变量的生产周期密切相关,所以要先弄懂变量的作用域和生存周期. 1.变量作用域 变量的作用域,就是指变量的有效范围,通常我们指的作 ...

  5. JavaScript设计模式基础之面向对象的JavaScript(二)

    多态 多态的实际含义:同一操作作用与不同的对象上面,可以产生不同的解释和不同的执行结果,就是说,给不同的对象发送同一个消息 的时候,这些对象会根据这个消息分别给出不同的反馈 代码如下: class D ...

  6. 《JavaScript设计模式与开发实践》读书笔记-基础知识

    笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...

  7. Javascript设计模式学习一

    学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识.this等重要概念,以及掌握一些函数式编程的技巧. Js多态 多态的思想:实际上是把“做什么”和“谁去做”分离开来.例 ...

  8. 转载,javascript 设计模式

    了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...

  9. 【JavaScript设计模式系列---开篇预览】

    转:http://www.cnblogs.com/Darren_code/archive/2011/08/31/JavascripDesignPatterns.html 2011-08-31 23:5 ...

随机推荐

  1. Swift3.0 控制流

    常用的一些判断方式 //for in let numberList = [, , , , ] //获取第一个元素 !拆包 print(numberList.first!)//1 //获取最后一个元素 ...

  2. 51nod 1268【dp】

    思路: 很水的dp吧...问的都是能否组成.. 哦对,这里sum最大才2e7,不会是2e9所以放心dp #include<cstdio> #include <map> #inc ...

  3. POJ2576【背包】

    题意: 每个人必须在一个团队或其他; 人对两支球队的数量不得超过1不同; 人们对各队的总重量应尽可能接近相等越好. 思路: 那么我求一个能接近最接近总和一半的值. 每个人的值就是物品,每个物品有且只有 ...

  4. hdoj1007【几何】【未完待续】

    题意: 在一个平面上有n(1e5)个点,然后求一个圆来包住这些点,求这个圆的最小半径. 思考: 要使一个圆直接包了这些点,没有任何思路..

  5. 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 ...

  6. NOIp2016 蚯蚓 【二叉堆/答案单调性】By cellur925

    题目传送门 $Sol$ $50pts$:我们考虑$q==0$的情况,每次在所有的蚯蚓中找到一只长度最大的,这非常二叉堆.所以我们可以用一个优先队列,随便水一下就有50分.($NOIp$的分真这么好拿? ...

  7. multiprocessing多进程模块

    1 基本理解 python不支持真多线程,无法在单进程中调用多核cpu.对于cpu密集型任务,可以使用多进程.python会调用OS原生多进程,运行在多核上,以此提高运行速度. 2 基本实现 impo ...

  8. python之迷宫BFS

    # @File: maze_queue_bfs from collections import deque maze = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0 ...

  9. 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 ...

  10. AO-XXXX

    一 AO4419:应用于开关应用或PWM应用的场效应管.