js 中函数的 4 种调用方式:

① 作为普通函数来调用,this 的值指向 window,准确地说,this 为 null,被解释成为 window。在 ECMAScript5 标准中,如果 this 为 null,则解释成 undefined

<script>
function t(){
this.x = 'hello';
}
t();
alert(window.x);
</script>

弹出:hello

② a.作为对象的方法来调用,this 指向方法的调用者,即该对象

<script>
var obj = {x:'hello',y:'world',t:function(){alert(this.x)}};
obj.t();
</script>

弹出:hello

b.

<script>
var obj = {x:'hello',y:'world',t:function(){alert(this.x)}}; var dog = {x:'wang'};
dog.t = obj.t;
dog.t();
</script>

弹出:wang

作为方法调用时,this 指向其调用那一刻的调用者,即母体对象,不管被调用函数,声明时属于方法还是函数

c.

<script>
var obj = {x:'hello',y:'world',t:function(){alert(this.x)}}; var dog = {x:'wang'};
dog.t = obj.t;
dog.t(); show = function(){
alert('show '+this.x);
}
dog.t = show;
dog.t();
</script>

d.

<script>
var obj = {x:'hello',y:'world',t:function(){alert(this.x)}}; var dog = {x:'wang'};
dog.t = obj.t;
dog.t(); show = function(){
alert('show '+this.x);
}
dog.t = show;
dog.t();
</script>

弹出:show wang

③ 作为构造函数调用时

js 中没有类的概念,创建对象使用构造函数来完成,或者直接用 json 格式{} 来写对象

<script>
function Dog(name,age){
this.name = name;
this.age = age;
this.bark = function(){
alert(this.name);
}
}
var dog = new Dog('妞妞',2);
dog.bark();
</script>

弹出:妞妞

new Dog 发生了一下几个步骤:

a. 系统创建空对象{},(空对象 construct 属性指向 Dog 函数)

b. 把函数的 this 指向该空对象

c. 执行该函数

d. 返回该对象

例:

<script>
function Robit(){
this.name = '瓦力';
return 'wali';
}
var robit = new Robit();
console.log(robit);
</script>

这段代码将输出?

答案:

 Robit {name: "瓦力"}

输出的是 Robit 对象,因为函数作为构造函数运行时,return 的值是忽略的,依然返回对象(return 无意义)。

④ 函数通过 call,apply 调用

语法格式:函数.call(对象,参数1,参数2...参数n);

<script>
function t(num){
alert('我的年龄是 '+this.age);
alert('虽然我看起来像 '+(this.age+num));
}
var human = {name:'迭戈.科斯塔',age:27};
human.t = t;
human.t(10);
</script>

弹出:我的年龄是 27

弹出:虽然我看起来像 28

接下来,不把 t 赋为 human 的属性,也能把 this 指向 human

<script>
function t(num){
alert('我的年龄是 '+this.age);
alert('虽然我看起来像 '+(this.age+num));
} var giroud = {name:'Giroud',age:28};
t.call(giroud,-5);
</script>

弹出:我的年龄是 28

弹出:虽然我看起来像 23

【分析】:

fn.call(对象,参数1,参数2...参数n);

运行如下:

a. fn 函数中的 this 指向对象 obj

b. 运行 fn(参数1,参数2...参数n)

Javascript 笔记与总结(1-4)this的更多相关文章

  1. [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

  2. [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  3. [Effective JavaScript 笔记]第3章:使用函数--个人总结

    前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...

  4. [Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码

    函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...

  5. [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

    js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

  6. 从头开始学JavaScript 笔记(一)——基础中的基础

    原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成   javascript   ECMASc ...

  7. 【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight

    做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...

  8. JavaScript笔记目录

    JavaScript笔记目录 一.JavaScript简介 二.在HTML中使用JavaScript ...持续更新中,敬请期待

  9. 蛋糕仙人的javascript笔记

    蛋糕仙人的javascript笔记:https://www.w3cschool.cn/kesyi/kesyi-nqej24rv.html

  10. JavaScript笔记(第一章,第二章)

    JavaScript笔记(第一章,第二章) 第一章: <meta http-equiv="Content-Type" content="text/html; cha ...

随机推荐

  1. FragmentTabHost+ViewPager实现底部按钮

    package com.example.fragmenttabdemo; import java.util.ArrayList; import java.util.List; import andro ...

  2. iptables 开启80端口

    [root@v01-svn-test-server online]# iptables -F#清空规则 [root@v01-svn-test-server online]# iptables -L# ...

  3. Webloigic监控

    http://www.huilog.com/?p=688 http://www.beansoft.biz/weblogic/docs92/jmx/accessWLS.html http://docs. ...

  4. Struts2文件上传和下载(原理)

    转自:http://zhou568xiao.iteye.com/blog/220732 1.    文件上传的原理:表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值:1)     ...

  5. Android快捷键

    Android快捷键ALT+/ :在布局文件中,提示输入的内容Shift + Ctrl +  / :注释Shift + Ctrl +  \ :解除注释

  6. 电赛总结(四)——波形发生芯片总结之AD9851

    一.特性参数 1.180 MHz时钟速率参考时钟具有6倍倍乘器.芯片具有高性能10位DAC和高速滞后比较器 2.+2.7 V至+5.25 V单电源工作 3.正常输出工作频率范围为 0-72MHz ; ...

  7. Kinect学习笔记(五)——更专业的深度图

           这一节的内容就是把深度图转换为彩色图,然后不再使用硬解码,而是继续采用sdk里面封装好的功能来减少测量的误差,以及避免转换为灰度图时,出现绿巨人时候的掉针的bug.       下面直接 ...

  8. LR结构图

  9. Let the Balloon Rise

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  10. Oracle 使用小计(3)

      1.出错处理 ORA-00911: invalid character. 这是因为在语句末尾加上了";"的缘故,去掉";"SQL就可以执行了~ (这与SQL ...