Uninote
Uninote
用户根目录
emoji test🧚
欢迎你
爱神的飞刀
都市风光
🧚🧚
🧚🧚2
🧚🧚3
__import__
ELK集群部署
JS面向对象函数的四种调用模式
Java入门学习路线目录索引(持续更新中)
c
个人文库
掘金
ElasticSearch + Logstash进行数据库同步
ElasticSearch两个节点的情况下,shard是如何分配的
ElasticSearch安装教程
ElasticSearch设置用户名密码访问
ElasticSearch适用场景,功能以及特点介绍
Kali Linux安装教程
Linux设置虚拟内存教学和实战
Xdebug文档(一)基本特性
docker
init
vuex的源码一些理解
使用nginx控制ElasticSearch访问权限
使用python的scrapy来编写一个爬虫
再见 Docker,是时候拥抱下一代容器工具了
前端工具集(辅助工具、开发工具、技术栈、学习网站)
剖析ElasticSearch基础分布式架构
剖析ElasticSearch核心概念,NRT,索引,分片,副本等
原型链
推荐几款Linux下比Notepad++好的编辑器软件
搭了一个 wordpress 站点
收集整理的一些前端资源
浏览 GitHub 太卡了?教你两招!
用最简单的话告诉你什么是ElasticSearch
网络是怎样连接的?从浏览器输入URL开始
解决ChromeDriver安装与配置问题
**游记/杂记**
a
a
a
b
c
c
b
a
a
x
s
a
c
network
https
vue-src
index
_posts
hello
about
index
coc
index
menu
index
perf
index
support-vuejs
index
v2
api
index
cookbook
adding-instance-properties
avoiding-memory-leaks
client-side-storage
creating-custom-scroll-directives
debugging-in-vscode
dockerize-vuejs-app
editable-svg-icons
form-validation
index
packaging-sfc-for-npm
practical-use-of-scoped-slots
serverless-blog
unit-testing-vue-components
using-axios-to-consume-apis
examples
commits
deepstream
elastic-header
firebase
grid-component
hackernews
index
modal
select2
svg
todomvc
tree-view
guide
class-and-style
comparison
components
components-custom-events
components-dynamic-async
components-edge-cases
components-props
components-registration
components-slots
computed
conditional
custom-directive
deployment
events
filters
forms
index
installation
instance
join
list
migration
migration-vue-router
migration-vuex
mixins
plugins
reactivity
render-function
routing
single-file-components
ssr
state-management
syntax
team
transitioning-state
transitions
typescript
unit-testing
search
index
style-guide
index

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/fancy727630/article/details/103350541 经验/问题描述:

在 js 中,无论是函数, 还是方法, 还是事件, 还是构造器...这些东西的本质都是函数,其中的区别只是所处的位置不同。根据函数内部this的指向不同,可以将函数的调用模式分成4种:函数模式、方法模式、构造器模式和上下文模式等四种不同的调用模式。

解决方法: 首先先来分析this指向问题:

1、任何函数都有属于自己的this

2、this的指向和函数的调用模式相关,意味着this的指向在函数声明的时候确定不了。然后分析this指向的思路:

1、this是属于哪个函数的

2、这个函数的调用模式是哪种

四种调用模式

1、函数模式

特征:简单的函数调用,函数名前面没有任何引导内容。

this 的含义: 在 函数中 this 表示全局对象, 在浏览器中this表示window。

注:任何自调用函数都是函数模式

2、方法模式

特征: 方法一定是依附于一个对象,将函数赋值给对象的一个属性,那么就成为了方法。

this的含义:这个依附的对象

注:arguments 这种伪数组, 或者 [] 数组这样的对象中, 这样调用函数也是方法调用, this 会只指向对象。

3、构造器模式(构造函数模式,构造方法模式)

特征:

(1)、使用 new 引导构造函数, 创建了一个实例对象

(2)、在创建对象的同时, 将this指向这个刚刚创建的对象

(3)、在构造函数中, 不需要 return , 会默认的 return this

分析:

由于构造函数只是给 this 添加成员, 而方法也可以完成这个操作,对与 this 来说, 构造函数和方法没有本质区别

关于return的补充:

在构造函数中,普通情况,可以理解为构造函数已经默认进行了return this,添加在后面的都不会执行

如果手动的添加 return ,就相当于 return this.

如果手动的添加 return 基本类型(字符串, 数字, 布尔), 无效, 还是 return this

如果手动的添加 return null 或 return undefined, 无效, 还是 return this

特殊情况, return对象, 最终返回对象

手动添加return对象类型,那么原来创建的this会被丢掉,返回 return 后面的对象

4、上下文调用模式

特征:上下文调用模式也叫方法借用模式,分为apply与call,上下文 就是环境, 就是自定义设置this的含义

语法:

函数名.apply(对象,[参数]);

函数名.call(对象,参数);

描述:

函数名就是表示的函数本身, 使用函数进行调用的时候默认 this 是全局变量

函数名也可以是方法提供, 使用方法调用的时候, this 是指当前对象.

使用apply进行调用后, 无论是函数,还是方法都无效了。我们的 this, 由apply的第一个参数决定

注意:

如果函数或方法中没有 this 的操作, 那么无论什么调用其实都一样.

如果是函数调用foo(),那么有点像foo.apply(window).

如果是方法调用o.method(),那么有点像o.method.apply(o).

无论是call还是apply在没有后面的参数的情况下(函数无参数,方法无参数)是完全一样的。

第一个参数的使用也是有规则的

如果传入的是一个对象, 那么就相当于设置该函数中的 this 为参数

如果不传入参数, 或传入null、 undefiend 等, 那么相当于this默认为 window。

———————————————— 版权声明:本文为CSDN博主「fan727630」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/fancy727630/article/details/103350541

点赞(0) 阅读(82) 举报