资讯专栏INFORMATION COLUMN

JS学习(this关键字)

Java_oldboy / 1073人阅读

摘要:关键字关键字是什么关键字是中最复杂的机制之一。它是一个很特别的关键字,被定义在所有函数的作用域中。可以把这条规则看作是无法应用其他规则时的默认规则。

this关键字 this关键字是什么

this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字,被定义在所有函数的作用域中。但是即使是非常有经验的JavaScript开发者也很难说清它到底指向什么。
1.this被定义在所有函数的作用域中
2.this指向哪个对象不取决于this被定义在哪里,而是取决于调用的位置

//定义一个全局变量
var v = 10;
//this经常被定义在函数的作用域中
function fn(){
    //this 总是要返回一个对象
    console .log(this . v);
}
fn();
绑定规则 默认绑定

在一个函数体中使用this,当该函数被独立调用。可以把这条规则看作是无法应用其他规则时的默认规则。

function foo(){
   console .log(this .a);
}
var a=2;
foo();//2
隐式绑定

隐式绑定的规则需要考虑的是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含。

function foo(){
    console .log(this.a);
}
var obj = {
  a:2,
  foo:foo
};
obj.foo();//2
隐式绑定丢失

隐式绑定丢失是最常见的this绑定问题,指的就是被隐式绑定的函数会丢失绑定对象,也就是说它会应用默认绑定,从而把this绑定到全局对象。

// 定义一个全局变量
var v = 100;
// 定义一个函数
function fn(){
    console.log(this.v);
}
// 定义一个对象
var obj = {
    v : 200,
    f : fn // 对象的f()方法指向fn()函数
}
// 定义一个全局变量,并被赋值为对象obj的f()方法
var fun = obj.f;
// 将fun作为一个函数进行调用
fun();
显示绑定

显示绑定就是明确在调用时,this所绑定的对象。JavaScript中提供了apply()方法和call()方法实现,这两个方法的第一个参数接收是一个对象,会把这个对象绑定到this,接着在调用函数时指定这个this

// 定义一个全局变量
var v = 100;
// 定义一个函数
function fn(){
    console.log(this.v);
}
// 定义一个对象
var obj = {
    v : 200,
    f : fn // 对象的f()方法指向fn()函数
}
// 定义一个全局变量,并被赋值为对象obj的f()方法
var fun = obj.f;
// 将fun作为一个函数进行调用
fun.apply(obj);
new绑定

1.创建(或者说构造)一个全新的对象
2.这个新对象会绑定到函数调用的this
3.如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。

function Hero(name){
    this.name = name;
}
// this取决于函数调用的位置
var hero1 = new Hero("hhh");

var hero2 = new Hero("xxx");

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

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

相关文章

  • 学习js中的'this'键字

      在JavaScript中‘this’关键字是一个非常重要的概念,我们虽然知道它重要,但它也十分的晦涩难懂,也给我们学习造成不小的困扰。  什么是'this'关键字  'this'关键字是为每个执行上下文(每个函数)创建的一个特殊变量;所以一般来说,在使用'this'关键字的函数中,'this'永远是取其所有者的值。总结一句话是该函...

    3403771864 评论0 收藏0
  • 深入学习js的面向对象

    摘要:字符串也可以是一个对象日期是一个对象数学和正则表达式也是对象数组是一个对象甚至函数也可以是对象一般的语言,都是利用类来创建对象,完成面向对象的过程。 在之前的一篇文章的末尾我提到了JavaScript的对象创建方法,可以利用函数,内置对象和this等关键词实现对象的创建。但是很遗憾,我最先接触的面向对象的编程语言是java,因而对于这些实现面向对象的方法并非自己的首选。下面是那篇文章:...

    loostudy 评论0 收藏0
  • JavaScript函数学习笔记

    摘要:在中通过关键字方式调用的函数都被认为是构造函数。这个新创建的对象的被指向到构造函数的。上的方法不起效果当然你要是这样的形式指定了返回的内容,它自然会原样返回啦工厂模型为了不使用关键字,构造函数必须显式的返回一个值。 个人博客原址 函数 函数式一块javascript代码,定义一次,可以被多次调用与执行,JS中的函数也是对象,所以JS函数可以像其他对象那样操作,和传递,所以也称函数对象函...

    wua_wua2012 评论0 收藏0
  • ES6,你不得不学!

    摘要:但是,的本质仍然是函数,是构造函数的另外一种写法。报错原生构造函数的继承对于一些原生的构造函数,比如,,,等,在是无法通过方法实现原生函数的内部属性,原生函数内部的无法绑定,内部属性获得不了。 在没有学习 ES6 之前,学习 React,真的是一件非常痛苦的事情。即使之前你对 ES5 有着很好的基础,包括闭包、函数、原型链和继承,但是 React 中已经普遍使用 ES6 的语法,包括 ...

    CKJOKER 评论0 收藏0
  • ES6学习笔记之箭头函数

    摘要:特性介绍箭头函数是新增的特性之一,它为这门语言提供了一种全新的书写函数的语法。用生成的函数会定义一个自己的,而箭头函数没有自己的,而是会和上一层的作用域共享。 本文同步自我得博客:http://www.joeray61.com JS中的箭头 箭头在JS里并不算是个新鲜的玩意儿,一直以来,JS都支持-->这样的箭头。 很早的时候有些浏览器还不支持JS,当时的人们为了兼容这些浏览器,需要这...

    Vultr 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<