JavaScript-this理解

javascript this可以绑定到:全局对象,自己定义的对象,用构造函数生成的对象,通过call或者apply更改绑定的对象

   1.全局对象 

function globalTest(name){
     this.name=name;
 }
 globalTest(‘tree‘);
 console.log(name);//tree,默认生成了全局对象name,这种写法一般是不允许的

  

2.自己定义的对象

var subway={
     name:‘1号线‘,
     speed:0,
     run:function(speed){
         this.speed=speed;
     }
 };
 subway.run(100);
 console.log(subway.speed); //100,this绑定到对象subway
 

3.用构造函数生成的对象

构造函数约定第一个字母要大写,只有用new调用的时候才算构造函数,否则跟普通函数没有什么不同,用new调用构造函数,this会绑定到生成的对象。

function Subway(speed){
     this.speed=speed;
 }
 var s=new Subway(100);
 console.log(s.speed);//100;this绑定到新生成的对象
 

   4.指定的对象,通过call或者apply绑定

call函数和apply函数的区别是参数不一样,两个方法都可以改变this绑定的对象,如下

call(obj,param1,param2……);

apply(obj,[]/*params[]参数数组*/);

function Subway(name){
     this.name=name;
     this.speed=0;
     this.run=function(speed){
      this.speed=speed;
     };
 }
 var s=new Subway(‘1号线‘);
 s.run(300);
 console.log(‘一号线速度为:‘,s.speed);//300;this绑定到新生成的对象s
 var s1=new Subway(‘2号线‘);
 s.run.apply(s1,[100]);
 console.log(‘二号线速度为:‘,s1.speed);//100;this绑定到对象s1
 s.run.call(s1,200);
 console.log(‘二号线速度为:‘,s1.speed);//200;this绑定到对象s1

最后:

javascript有一个设计缺陷,使得的this绑定混乱

var subway={
     name:‘1号线‘,
     speed:0,
     run:function(speed){
         this.speed=speed;  //绑定到对象本身
         function test(speed){
             this.speed=speed+50;//竟然绑定到全局变量了,真是匪夷所思啊
         }
         test(speed);
     }
 };
 subway.run(100);
 console.log(subway.speed);//100
 console.log(speed);//150

解决方法约定用that代替this

var subway={
     name:‘1号线‘,
     speed:0,
     run:function(speed){
         var that=this;   //用that代替this
         this.speed=speed;
         function test(speed){
             that.speed=speed+50;
         }
         test(speed);
     }
 };
 subway.run(100);
 console.log(subway.speed);//150
时间: 2024-10-03 20:00:51

JavaScript-this理解的相关文章

【JavaScript】理解与使用Javascript中的回调函数

在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因为函数是第一类对象,我们可以在Javascript使用回调函数.在下面的文章中,我们将学到关于回调函数的方方面面.回调函数可能是在Javascript中使用最多的函数式编程技巧,虽然在字面上看起来它们一直一小段Javascript或者jQuery代码,但是对于许多开发者来说它任然是一个谜.在阅读本文

javascript深入理解js闭包(看了挺多的,感觉这篇比较透彻)

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function

javascript深入理解js闭包

一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数

【温故而知新-Javascript】理解 DOM

DOM(Document Object Model,文档对象模型)允许我们用 JavaScript 来探查和操作 HTML 文档里的内容.它对于创建丰富性内容而言是必不可少的一组功能. 1. 理解文档对象模型 DOM 是一组对象的集合,这些对象代表了HTML文档里的各个元素.顾名思义,DOM就像一个模型,它由代表文档的众多对象组成. 先来个简单的HTML文档的例子: <!DOCTYPE html> <html> <head> <meta name="au

面向对象的javascript个人理解

javascript涵盖3个部分 1 ECMAScript 语言的核心,即变量,函数,循环等2 DOM(文档对象模型),用来访问元素3 BOM(浏览器对象模型),用来访问浏览器的一些属性 常说的ES6其实就是ECMAScript第六版,从1到6添加了许多新特性,引入了许多新对象和属性 面向对象的具体含义以及这种程序设计风格的主要特征 面向对象程序设计 简称OOP其中最常用到的概念1.对象,方法,属性2.类3.封装4.聚合5.重用于继承6.多态 具体理解各个部分 对象,就是“事物”(包括人和物)在

javascript 深入理解 继承(转)

通过对继承的深入理解,更了解javascript.本人还不太写会博客,转自汤姆大叔,链接http://www.cnblogs.com/TomXu/archive/2012/01/05/2305453.html. 前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实现传统的类继承模型是很简单,但是实现 JavaScript 中的原型继承则要困难的多.

javascript深入理解js闭包(摘自网络)

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function

(转)javascript深入理解js闭包

一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数

关于javascript闭包理解

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一:关于变量的作用域 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. function f1(){ var n=999; } alert(n); // error 声明变量的时候记得使用var声明,不然的话java

javascript深入理解闭包

一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数