this 指针

文章目录

this 指针
- 含义
- this 的指向模式
- 函数调用
- - 一般函数调用
  - 构造函数 new
  - bind() call() apply()
- 对象的方法调用
- 优先级规则

含义

-this 代表当前正在执行某个方法的对象，this 总是指向调用该方法的对象。

this 的指向模式

函数调用，在一个单纯的函数里面，this 的指向 window，因为是 window 调用的函数补：构造函数 new 下调用，this 指向被构造的新对象 / appl，call bind 的调用，this 指向第一个参数
对象里的方法调用，this 总是指向调用他所在方法的对象，this 的指向与所在方法的调用位置有关，与方法的声明位置无关；

函数调用

一般函数调用

当函数被单独调用时，this 指向的是全局对象;

// 在全局函数里声明一个 x
let x = "2";// 此时的this 指向的是window对象
// 因为是全局调用的函数
let fn = function () {console.log(this.x);
};// 显示结果
fun(); // 2

构造函数 new

以构造函数形式调用时候，此时 this 代表创建的对象

// 声明一个函数
function Person(name) {this.name = name;console.log(this);
}// 仅仅输出该函数，结果是window
console.log(Person("张")); // window//使用构造函数
var p1 = new Person("jack"); // Person {name: 'jack'}
var p2 = new Person("lucy"); // Person {name: 'lucy'}

bind() call() apply()

bind()

格式：f.bind(someObject)
定义：会创建一个和 f 一样的函数，并将 this 永久的绑定给了 bind 的第一个参数，
注意：bind 只能生效一次,即被 bind 创建的函数，不能被 bind 拿来使用

function f() {return this.a;
}let g = f.bind({ a: "张" });
console.log(g()); // 张// 因为 g是有bind 构成的，所以无法改变
let h = g.bind({ a: "zzz" });
console.log(h()); //张

call()和 apply()

格式：call(thisObj,Object) apply(thisObj,[argArry])
定义：调用一个对象的一个方法，以另一个对象替换当前对象

// 命名全局变量
let name = "钊";let demo = {name: "张",getName: function () {console.log(this.name);},
};let demo2 = {name: ["zzz", "卓"],
};demo.getName.call(demo); //张
demo.getName.apply(demo2); //Array(2) ['zzz', '卓']

补充

当 bind(), call()和 apply()传入 null 或 undefined 时, 会自动将 this 绑定到全局对象

function foo() {console.log(this);
}
let bar = foo.bind(null);foo.call(null); //window
foo.apply(undefined); // window
bar(); // window

对象的方法调用

当函数作为对象里的方法被调用时，this 被设置为调用该函数的对象
1.先定义函数，再将其附属到对象中

//声明函数
let fn = function () {console.log(this.x);
};let x = "2";// 放入位置
let obj = {x: "1",fn: fn,
};obj.fn(); // 1
fn(); // 2

2.将函数作为对象里的方法调用

let o = {php: 22,f: function () {return this.php;},
};console.log(o.f()); //22

优先级规则

call、apply 和 new 都可以调用函数，无法同时使用
new > call、apply 和 bind > 对象方法引用

js 中的this指针相关推荐

js中的this指针（二）
在 js 中声明并定义一个函数后,除了定义时传入的形式参数,函数还会接收到 2 个附加的参数:this 和 arguments. this 指针的值取决于调用时的模式. 当这个函数被保存为对象的一个属 ...
第22篇 js中的this指针的用法
前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() {this ...
JS OOP -02 深入认识JS中的函数
深入认识JS中的函数: 1.概述,认识函数对象 2.函数对象和其他内部对象的关系 3.将函数作为参数传递 4.传递给函数的隐含参数:arguments 5.函数的apply,call方法和length ...
关于JS中for循环时，作用域问题和this指针指向的总结
在大多数计算机语言中,{}这样一对花括弧叫一个块级作用域,也就是一个执行环境.在一个执行环境中,执行环境内部的变量在作用域外部式无法被访问到的.执行环境内部倒是可以访问外部的变量. 但由于JS中没有块 ...
[JavaScript] 探索JS中的函数秘密
函数长啥样? 把一些要重复使用的内容封装到函数内. function foo(title) {console.log(title) } foo('title') foo('dust') foo('he ...
随笔——js中的this指向，apply()与 call()
js中apply和Math.max()函数(原文) apply() Function.apply() 是JS的一个OOP特性,一般用来模拟继承和扩展this的用途,对于上面这段代码,可以这样去理解: ...
js中深拷贝和浅拷贝问题
最近在学习c++,以前从来没接触过也没想到过深拷贝和浅拷贝.c++里有深拷贝和浅拷贝,那么其它语言中应该也有. 本文参考: https://juejin.im/post/59ac1c4ef265da2 ...
关于JS中的constructor与prototype
在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下: 我们都知道,在JS中有一个function的东西.一般人们 ...
Js中的callback机制
http://www.awflasher.com/blog/archives/906 Js中的callback机制,即回调,可以这么形象的来理解,一个button存在这里,我们可以add一个actio ...

js 中的this指针

this 指针

文章目录

含义

this 的指向模式

函数调用

一般函数调用

构造函数 new

bind() call() apply()

对象的方法调用

优先级规则

js 中的this指针相关推荐

最新文章

热门文章