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. MySQL主备停机步骤与注意事项

    双十一马上到了,一堆的事情,今天登录mysql数据库服务器的时候突然发现服务器时间戳不对,比北京时间快了几分钟,我的天...随后检查了其他的几台数据库服务器发现同样都存在不同的偏差,最小的比北京时间快 ...

  2. linux架构图

    / 根目录 │ ├boot/ 启动文件.所有与系统启动有关的文件都保存在这里 │ └grub/ Grub引导器相关的文件 │ ├dev/ 设备文件 ├proc/ 内核与进程镜像 │ ├mnt/ 临时挂 ...

  3. PowerDesigner破解

    1.从百度云盘下载:我的网盘 -- 开发工具空间 -- PowerDesgner12   2.安装powerDesigner   3.将Sybase.PowerDesigner.v12.5-Crack ...

  4. jquery tab

    jquery tab <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  5. Synergy

    Synergy 可以在多台电脑之间共享鼠标.键盘.剪贴板.Synergy是一套开源共享软件,完美跨 Win.Linux.Mac运行.真正做到使用一套键盘和鼠标就可控制多个电脑. 下载地址:http:/ ...

  6. 字符编码GB2312、GBK、UTF-8的区别

    本文来自:javaeye网站 UTF8是国际编码,它的通用性比较好,外国人也可以浏览论坛 GBK是国家编码,通用性比UTF8差,不过UTF8占用的数据库比GBK大~ 提示:如果您的网站客户群体主要是面 ...

  7. WebStorm9

    下载地址: http://www.onlinedown.net/soft/554406.htm 注册码: UserName:William===== LICENSE BEGIN =====45550- ...

  8. Oracle表空间管理

    oracle表空间相关常用命令小结: 1.ALTER DATABASE SET DEFAULT BIGFILE TABLESPACE;              //修改表空间数据文件类型 2.ALT ...

  9. 使用iterator出现的死循环

    public static void main(String[] args) { List<String> list = new ArrayList<String>(); li ...

  10. 编译包含Google Play服务App的SDK版本问题

    编译包含Google Play服务App的SDK版本问题   错误信息:No Resouce identifier found for attribute 'touchscreen BlocksFoc ...