Javascript中this的用法详解_基础知识

前些日子面试的时候用到了this,面试官说我的理解有点偏差,回来看了下书和一些博客,做了点测试,发现自己的理解的确有误

1.全局变量

应该是最常用的吧,函数中调用一个this,这里其实就是全局变量

var value="0"; function mei(){
 var value="1";
 console.log(this.value); //0  console.log(value);   //1 }
mei();

输出0就是因为this指向的是全局

2.构造函数

这是我比较熟悉的用法,构造函数中用this,new一个新的对象后this就指向了这个新的对象

var value="window"; function mei(){
 this.value=1;
 this.show=function(){
  console.log(this.value)
 }
} var m=new mei();
console.log(m.value);  //1 m.show();        //1

可以看到输出的是1而并不是window,可见由于构造函数,这里的this已经指向新的对象了而不是全局变量

3.call和apply

直接借用我的call和apply的博客中的例子

 var p="456";
 function f1(){
  this.p="123";
 }
 function f2() {
  console.log(this.p);
 }
 f2();       //456  f2.call(f1());  //123  f2.apply(f1());  //123

第一行输出456很好理解,this指向全局,后面的123是因为使用了call或者apply后,f2中的this指向了f1,而f1中的p为123,具体解释直接戳那篇博文

4.函数作为某个对象的方法调用(我出错的地方)

当时让我写一个对象有几个方法,我脑子一抽定义了个全局变量,然后在对象的方法里用this调用,面试官问我这个this是什么?我说应该是window,因为这种方式我用的少,以为只有new或者call才会改变this的指向,他就说不对,让我回去自己看看,现在试了试,我还真是错了,贴代码

var value="father"; function mei(){}
mei.value="child";
mei.get=function(){console.log(this.value)};
mei.show=function(){console.log(value)};
mei.get();   //child mei.show();  //father

由于get是作为mei的方法调用的,因此这里的this指向了mei.value所以输出child

至于father我是这样理解的,show指向的函数是定义在全局环境下的,由于作用域链,在show中没有找到value,于是就去定义他的环境中找,这就找到了全局的value,如果这里有理解错误的话希望有朋友可以指出来!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, this
用法
javascript的this用法、javascript this 详解、javascript this用法、javascript alert用法、javascript闭包详解,以便于您获取更多的相关知识。

时间: 2024-08-09 17:16:43

Javascript中this的用法详解_基础知识的相关文章

JavaScript中的Promise使用详解_基础知识

许多的语言,为了将异步模式处理得更像平常的顺序,都包含一种有趣的方案库,它们被称之为promises,deferreds,或者futures.JavaScript的promises ,可以促进关注点分离,以代替紧密耦合的接口. 本文讲的是基于Promises/A 标准的JavaScript promises.[http://wiki.commonjs.org/wiki/Promises/A] Promise的用例:     执行规则     多个远程验证     超时处理     远程数据请求

javascript 中的事件委托详解_基础知识

这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是撤出了我们的事件冒泡和捕获机制,以及事件委托机制,对于上边这些,我们慢慢来看. 首先说一下事件冒泡和事件捕获机制,事件冒泡是有微软公司提出来的,事件捕获是有网景公司提出来的,当时两家是争论的不可开交,后来w3c也没办法,就采取了折中的方式,事件产生后先捕获后冒泡, 通常,在js中监听事件的方法共有三

JavaScript中this的使用详解_基础知识

我们要记住一句话:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象.切记-本文将分三种情况来分析this对象到底身处何方.普通函数中的this无论this身处何处,第一要务就是要找到函数运行时的位置. 复制代码 代码如下: 1 var name="全局";2 function getName(){3     var name="局部";4     return this.name;5 };6 alert(getName()); 当this出现在全局

javascript 中__proto__和prototype详解_基础知识

__proto__是内部原型,prototype是构造器原型(构造器其实就是函数) 构造器的原型(prototype)是一个对象 那什么是构造器呢? 要想创建一个对象,首先要有一个对象构造器,就像php里面一样,要想创建一个对象,首先要有一个类 构造器的实质就是一个函数,下面的问题是:如何通过这个构造器来创建一个对象呢? 答案: new 构造器构造的是对象. 一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 复制代

Javascript中的默认参数详解_基础知识

一些语言--像Ruby,CoffeeScript及即将到来的javascript版本--在定义一个函数的时候,可以声明默认参数,像下面这样: 复制代码 代码如下: function myFunc(param1, param2 = "second string") {     console.log(param1, param2); } // Outputs: "first string" and "second string" myFunc(&q

JavaScript中的cacheStorage使用详解_基础知识

localStorage 应是家喻户晓的?但本地存储这个家族可远不止它.以前扯过 sessionStorage,现在还有个神奇的 CacheStorage.它用来存储 Response 对象的.也就是说用来对 HTTP ,响应做缓存的.虽然 localStorage 也能做,但是它可能更专业. CacheStorage 在浏览器上的引用名叫 caches 而不是驼峰写法的 cacheStorage,它定义在 ServiceWorker 的规范中.CacheStorage 是多个 Cache 的集

JavaScript中document对象使用详解_基础知识

对象属性 复制代码 代码如下: document.title                 //设置文档标题等价于HTML的<title>标签 document.bgColor               //设置页面背景色 document.fgColor               //设置前景色(文本颜色) document.linkColor             //未点击过的链接颜色 document.alinkColor            //激活链接(焦点在此链接上)的

JavaScript中的eval()函数详解_基础知识

eval("1+2"),-> 3       动态判断源代码中的字符串是一种很强大的语言特性,几乎没有必要在实际中应用.如果你使用了eval(),你应当仔细考虑是否真的需要使用它. 一.eval()是一个函数还是一个运算符 eval()是一个函数,但由于它已经被当成运算符来对待了..JavaScript语言的早期版本定义了eval函数,现代JavaScript解释器进行了大量的代码分析和优化.而eval的问题在于,用于动态执行的代码通常来讲不能分析,换句话说,如果一个函数调用了e

javascript中arguments,callee,caller详解_基础知识

arguments是什么? arguments是函数调用时,创建的一个类似的数组但又不是数组的对象,并且它存储的是实际传递给函数的参数,并不局限于函数声明的参数列表哦. 尼玛,什么意思? 写个demo看看,代码见下 <!DOCTYPE html> <head> <title>arguments</title> <meta http-equiv="Content-Type" content="text/html; chars