和this有关的故事

本文章引用《你所不知道的Javascript》

重点:this既不指向函数自身也不指向函数的词法作用域=》调用时被绑定,指向谁完全取决于在哪里调用。

词法作用域:在我看来就是我们常用的全局变量

eg:

function foo(num){console.log("foo:"+num); data.count++}  var data = {count:0};var i;

for(i=0;i<10;i++){if(i<5){foo(i);}}  console.log(data.count)

运行结果:

foo:0、foo:1、foo:2、foo:3、 foo:4  5

同样为了减少变量,完全使用foo本身作为词法作用域

function foo(num){console.log("foo:"+num); foo.count++} 

 foo.count=0;

var i;for(i=0;i<10;i++){if(i<5){foo(i);}}

console.log(foo.count);

运行结果:同上。

但是为啥我们要用这些方式呢,因为不理解this.

所以this是啥?

以上方法又该如何用this.其实很简单。在调用时指定

function foo(num){console.log("foo:"+num); this.count++}  foo.count=0;var i;for(i=0;i<10;i++){if(i<5){foo.call(foo,i);}}console.log(foo.count)

运行结果:同上。

重点:this不可以与词法作用域混合使用。无法实现

以上只是阐述了一个和词法作用域相关的函数调用

那么下面为什么一定要用this?

function identify(){return this.name.toUpperCase()}

function speak(){var greeting="Hello,I'm"+identify.call(this);console.log(greeting)}

var me = {name:"xiaohua"}; var you={name:"Reader"};

 identify.call(me);

speak.call(me);

运行结果:宝宝们自己执行吧

那我们显式的写,有哪些坏处?

会使得代码很混乱。

通过原型,可以自动调用上下文,简洁而方便。

当然除了这些,还有es6里箭头函数的引用。这个部分下次再说

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,958评论 2 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,246评论 19 139
  • 继承 一、混入式继承 二、原型继承 利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承,这种实现继承的...
    magic_pill阅读 1,096评论 0 3
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,135评论 1 10
  • 007-8班刘转丽同学围观5班的分享,在此发布,是给自己存资料 感受 准备充分,气氛热烈,真真的人才济济。 5班苏...
    张娟丽2210阅读 212评论 0 0