Javascript 笔记与总结（1-4）this

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

<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 指向其调用那一刻的调用者，即母体对象，不管被调用函数，声明时属于方法还是函数

<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>

<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）

转载于:https://www.cnblogs.com/dee0912/p/4430658.html

Javascript 笔记与总结（1-4）this相关推荐

javascript笔记：深入分析javascript里对象的创建（上）续篇
今天回来一看我的博客居然有这么多人推荐真是开心极了,看来大家对我的研究有了认可,写博客的动力越来越大了,而且我发现写javascript在博客园里比较受欢迎,写java的受众似乎少多了,可能博客园里j ...
JavaScript 笔记Day1
<JavaScript 笔记> JavaScript 是属于网络的脚本语言! JavaScript 是世界上最流行的编程语言.这门语言可用于 HTML 和 web,更可广泛用于服务器.PC ...
JavaScript笔记整理
JavaScript笔记整理这段时间没有之前花在学习上的时间多了目前进度还停留在JavaScript和D3.js(这个目前只找到了教程) 主要原因是因为决定自己找单位实习,到了今天26号才有了眉目 ...
[Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
【JavaScript笔记 · 基础篇(五)】Array全家桶（引用数据类型中的数组 / Array对象 / Array.prototype）
文章目录一. 引用数据类型中的数组 1.1 概述 1.2 初始化 1.2.1 字面量 1.2.2 构造函数模式 1.3 访问 1.4 length属性 1.5 数组遍历 1.6 类数组对象 1.6. ...
狂神Javascript笔记
学习狂神JavaScript所记录的笔记 Javascript笔记一.前端核心分析 1.1.概述 Soc原则:关注点分离原则 Vue 的核心库只关注视图层,方便与第三方库或既有项目整合. HTML ...
JavaScript笔记（狂神说）
JavaScript笔记(狂神说) 本文章根据b站狂神说javascript视频教程整理视频链接:https://www.bilibili.com/video/BV1JJ41177di?from=s ...
尚硅谷李立超JavaScript笔记
李立超老师JavaScript笔记目录 1.JS简介 2.JS的HelloWorld 3.JS代码编写的位置 4.JS的基本语法 5.字面量与变量 6.标识符 7.数据类型 8.强制类型转换 1. ...
JavaScript笔记（一）
JavaScript笔记(一) 1 JavaScript简介 JavaScript,就是我们通常所说的JS,是一种嵌入到HTML页面中的脚本语言,由浏览器一边解释一边执行. 我们在"HTML ...

Javascript 笔记与总结（1-4）this

Javascript 笔记与总结（1-4）this相关推荐

最新文章

热门文章