this

teren 发布于2019-08-22 17:12 / 3412人阅读

摘要：在中一共有四种调用模式方法调用模式函数调用模式构造器调用函数和调用模式。以此模式调用函数时，会被绑定到全局变量，也就是对象。当然这样的构造器函数形式我们并不常用。方法让我们构建一个参数数组传递给调用函数，同时它也允许我们选择的值。

this

this在面向对象编程过程中非常重要，它的值取决于调用模式。

在js中一共有四种调用模式：_方法调用模式、函数调用模式、构造器调用函数和apply调用模式_。这四种模式在初始化参数this上是存在着差异的。

方法调用模式

当函数被保存为对象的一个属性，我们称之为它的一个方法。

方法调用模式定义：调用表达式包含一个提取属性的动作（即包含一个.点表达式或者[]下标表达式），那么它就是当作一个方法来调用。

看个简单的例子：

var name = "window";   
var xiaoming = {
    name: "xiaoming",
    lastname:"wang",
    saylastname:function(){
        console.log(this.lastname)
    }
};
console.log(xiaoming.saylastname()); //wang

方法是可以使用this访问自己所属的对象。this对对象的绑定是发生在调用的时候！（强调）是发生调用的时候。

这样通过this取得他们所属对象的上下文的方法也称之为公共方法。

函数调用模式

函数调用模式定义：当一个函数并非一个对象的属性时，那么它就是被当作一个函数来调用的。以此模式调用函数时，this会被绑定到全局变量，也就是window对象。需要⚠️的是，在严格模式下，this的值为undefined。

延续上个模式的例子：

var a = xiaoming.saylastname;
a();  //window

这个例子最好的说明：函数调用并非一个对象的属性，就被当作一个函数来调用。

构造器函数

构造器调用模式定义：如果创建的目的就是i 希望结合new关键字前缀来调用，那它就被称为构造器函数。

如果在一个函数前面带上new来调用，那么就会创建一个链接到该函数的prototype成员的新对象，同时也会被绑定到哪个欣对象上。

看这个例子：

var Person = function(Name){
        this.name = Name;
    };
//给person的所有对象提供一个公共方法
Person.prototype.say = function(){
    return this.name;
};
//构造一个person实例
var xiaoming = new Person("xiaoming");  
console.log(xiaoming.say()); //xiaoming

在构造区函数中，通常会以大写约定，这样它们会保存在以大写格式命名的变量中。这样的约定会得意更加容易区分这是构造器函数变量。

⚠️ 当然这样的构造器函数形式我们并不常用。之后我也会介绍更好的替代方式。

apply调用模式

apply调用模式定义:函数可以拥有方法。apply方法让我们构建一个参数数组传递给调用函数，同时它也允许我们选择this的值。

简单的说就时绑定this指向的对象。

apply可以接收2个参数，参数1:要绑定给this的值；参数2:数组参数。

看两个例子：

var add = function(num1,num2){
    return num1 +num2;
}
var arr = [4,5];
var sum = add.apply(null,arr);
console.log(sum); //9

var xiaohong = {
    name:"xiaohong"
}
var xiaohongname = Person.prototype.say.apply(xiaohong);
console.log(xiaohongname); //xiaohong

第一个例子：是最典型的aplly方法的使用。

第二个例子中本身小红对象没有say方法，但是我们可以通过apply方法将say方法传递给调用对象，也可以说绑定给指定的对象，而this也指向这个对象。

总结

所以说我们应该牢牢记住this的值取决于调用的模式。这样才会让我们了解初始化参数this存在的差异。

idc机房托管私有云 this[] this _this this变量

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94964.html

node那点事(一) -- Readable streams（可读流）

摘要：流的类型中有四种基本的流类型可读的流例如可写的流例如可读写的流例如在读写过程中可以修改和变换数据的流例如可读流可读流有两种模式流动模式可读流自动读取数据，通过接口的事件尽快将数据提供给应用。流的简介流（stream）在 Node.js 中是处理流数据的抽象接口（abstract interface）。 stream 模块提供了基础的 API 。使用这些 API 可以很容易地来构建实...

rickchen 2019-08-22 15:58 评论0 收藏0
原生js实现移动端+pc端轮播插件

摘要：原生写的轮播兼容移动端插件，支持轮播速度，轮播内容，轮播间隔，手势灵敏度自定义，导航圆点点击跳转手势滑动。使用说明文件包含小部分语法编写的文件，在移动端有兼容性问题，仅供于源码参考。移动端跟端开发引用文件直接下载进行引入使用。 slide.js 原生js写的轮播兼容 pc+移动端插件，支持轮播速度，轮播内容，轮播间隔，手势灵敏度自定义，导航圆点点击跳转,手势滑动。使用说明：sli...

leanxi 2019-08-22 16:25 评论0 收藏0
手把手教你用原生JavaScript造轮子（2）——轮播图（更新：ES6版本）

摘要：绑定轮播事件然后是鼠标移入移出事件的绑定鼠标移入移出事件移入时停止轮播播放的定时器，移出后自动开始下一张的播放。通过上一篇文章的学习，我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图，希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Lets begin! 目前项目使用 ES5及UMD 规范封装，所以在前端暂时只支持标签的引入方式...

jasperyang 2019-08-23 10:57 评论0 收藏0
基本数据结构和查找算法

摘要：本文包括简单的数据结构和查找算法，属于个人整理。初学编程可以用这里的东西联系一下，看一看也挺有意思博主个人不认为中算法数据结构不重要，毕竟这是程序开发的基本功。本文包括简单的数据结构和查找算法，属于个人整理。初学编程可以用这里的东西联系一下，看一看也挺有意思博主个人不认为js中算法数据结构不重要，毕竟这是程序开发的基本功。本文还会根据博主学习进展和时间安排不定期更新数据结构部分列...

姘搁『 2019-08-23 11:47 评论0 收藏0
ionic 2+ 手势解锁界面

摘要：手势解锁界面一些对安全要求比较高的少不了锁屏页面，而手势解锁对于用户来说使用方便，对于程序员来说小有挑战，怎么有弃之不用的道理。 ionic 2+ 手势解锁界面一些对安全要求比较高的app少不了锁屏页面，而手势解锁对于用户来说使用方便，对于程序员来说小有挑战，怎么有弃之不用的道理。效果图效果图处理短，方便大家阅读showImg(https://segmentfault.co...

Hancock_Xu 2019-08-22 17:18 评论0 收藏0