js thiskeyword

相信大家都接触过this了,那么 this究竟是什么意思呢?看其字面意思就是个代词。指代其它的一些东西。

那么我们在程序其中,事实上也是一样。this也是个代词。

比方我们在java其中,this的keyword是指代当前class 的本身。不管this身处何处,this都指向当前class,它的作用域是作用域整个class的。

只是我们今天不是讲后台。我们的重点是讲js。那么js中的thiskeyword的作用域是怎么样的呢?和java有什么差别呢?

1,第一种情况

var person= function(){

this.name = "spring";

this.age = 25;

alert(this); //output: window

}

这段代码的thiskeyword指向的是全局window对象.

2,另外一种情况

var person= function(){

this.name = "spring";

this.age = 25;

console.log(this); //output: person本身

}

new person(); //解释:实例化this指代person对象

那么如上所看到的,实例化该person对象之后。this指向的是当前person的本身。

3。第三种情况

var person = {

name:"spring",

age: 25,

eat: function(){

alert(this.name+"正在吃饭"); //output: spring 正在吃饭

}

}

person.eat();//解释:this指代当前person对象

4。第四种情况:

var person = {

name:"spring",

age: 25,

sex:{

male:"男",

getMale: function(){

console.log(this); //output:  sex object

}

}

};

person.sex.getMale(); //解释:this指代sex object

------------------------------------------------------------------------------------------------------------

好了写到这里。各位看明确了没有?请注意红色部分字体。

new person(); //this指代person对象

person.eat();//this指代当前person对象

person.sex.getMale(); //this指代sex对象

依据这个规律,我们能够得出一个结论:

           谁调用的this就指代谁。

5,第五种情况:回调函数

function test(){

var person = {

name:"spring",

age: 25,

getAge: function(callback){

console.log(this); //output: person object

callback(this.age);

}

}

alert(this); //output: test object

person.getAge(function(age){

alert(age);//output: 25

//xxx

alert(this);//output: window object

});

}

new test();

注意看上面回调函数里面的this(// xxx以下那一行),却指向了window全局对象,哎。

怎么是这样。为什么不是person对象呢?为什么不是test对象呢?

那么按照我们上面的结论,谁调用指向谁。那么我们看是谁调用的?

噢,找到了,声明了一个匿名函数当做參数传递给了getAge(callback)方法。然后运行了callback(this.age);

那么我们又想一下,这个匿名函数又是谁呢?好像谁都不属于,那么该匿名函数就是指向window对象啦。

soga,原来是这样。似乎有点点懂了。

结论:回调函数的时候,this的上下文发生了变化,也就是this的指针发生了变化。

只是我们一般会这样做:

alert(this); //output: test object

var self = this; //self 保存this作用域

person.getAge(function(age){

alert(age);//output: 25

alert(this);//output: window object

alert(self);//output: test object;

});

噢。原来这样用self变量去储存当前this(也就是test)对象。

6.第六种情况prototype

//编写一个string的insert method

String.prototype.insert = function(){

console.log(this);  //output > String {0: "1", 1: "2", 2: "3", 3: "4", 4: "5", 5: "6", length: 6, insert: function}

                                             //这里this代表的是String.prototype > object对象

            console.log(this.toString()); //output string "123456"

}

test();

function test(){

var str = "123456";

str.insert(); //调用insert method

}

然后我们再看另外一段代码:

function Person(name){

console.log(this);//output > Person

this.name = name;

}

Person.prototype.getName = function(){

console.log(this);//output > Person

return this.name;

};

var person = new Person("spring"); //实例化this代表自身

person.getName(); // output > spring

上面这种写法等同于以下这种写法:

function Person(name){

this.name = name;

}

Person.prototype = {

getName: function(){

console.log(this);//output > Person

return this.name;

}

};

7.第七种情况call、apply

function base(){

this.add = function(){

console.log(this);//output > test {add: function}  ,this指针发生了变化

}

}

function test(){

console.log(this);//output > test {}

base.call(this);   //call方法会把这个base中的this对象用这个this(也就是test对象)取代,

//取代之后,自然base对象中的this.add 方法就变成了test的方法属性了

//call方法把别人的东西变成自己的。 other.call(yourself)。yourself对象会取代other中的this对象

console.log(this) //output > test {add: function}

}

var result = new test();

console.log(result);//output > test {add: function}

result.add();//调用,调用之后,发现this的指针发生了变化。

this不再是base对象而是变成了test对象了。

call带參数的情况:

function base(d1,d2){

alert(d1+d2); //output > 123456

this.add = function(){

console.log(this);//output > test {add: function}

}

}

function test(){

base.call(this,"123","456");//多个參数用逗号隔开:"123","456","789"……

}

var result = new test();

apply method:

call 和apply的差别就是參数类型不同

function base(d1,d2){ //非常惊奇的发现,本来传给我的參数是一个数组呀。按道理来说我应该接收的是一个数组嘛,但是却被拆分成两个对象。

alert(d1+d2); //output > 123456

this.add = function(){

console.log(this);//output > test {add: function}

}

}

function test(){

base.apply(this,["123","456"]); //參数是数组:["123","456","789"……]

}

var result = new test();

改动下变成:

function base(d1,d2){

alert(d1+d2);//output > 123456

this.add = function(data){

alert(data);//output > ADD

}

}

function test(){

}

var result = new test();

base.apply(result,["123","456"]);

result.add("ADD")

时间: 2024-11-10 16:21:19

js thiskeyword的相关文章

【API】高德地图API JS实现获取坐标和回显点标记

1.搜索+选择+获取经纬度和详细地址 2.回显数据并点标记 3.实现 第一步:引入资源文件 <!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script><!--引入UI组件库(1.0版本) --><script src="//webapi.amap.com/ui/1.0/main.js">

js跨域

第一次写博客,好紧张,不知道能写成啥样,哈哈哈. 自己的一知片解,有错请多多指教,嘻嘻嘻. 一.何为跨域? 只要协议.域名.端口后任何一个不同,就是跨域. 举个例子: http://www.example.com 协议不同 https://www.example.com http://www.example.com 域名不同 http://www.test.com http://www.example.com 端口不同 http://www.example.com:81 注意:ip相同,域名不同

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

node.js的安装及配置

一.安装 直接在浏览器搜索node.js,在官网上下载(一般旧版的更加稳定,比如下载4.4.7版本) 点击DOWNLOADS 往下翻,点击Previous Release Windows下载msi(64位/32位) 根据提示一步步安装,安装之后的文件夹如下: 在cmd命令行下输入node -v,如果出现如下,说明安装成功: 二.关于配置 在安装路径下新建两个文件夹: 创建完两个空文件夹之后,打开cmd命令窗口,输入 npm config set prefix "D:\Program Files

Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例

server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http"); // 创建服务器,创建HTTP服务器要调用http.createServer()函数,它只有一个参数,是个回调函数,服务器每次收到http请求后都会调用这个回调函数.服务器每收到一条http请求,都会用新的request和response对象触发请求函数. var server=http.createS

Knockout.js简介

Knockout是一款很优秀的JavaScript库,通过应用MVVM模式使JavaScript前端UI简单化.任何时候你的局部UI内容需要自动更新,KO都可以很简单的帮你实现,并且非常易于维护. Knockout的3个核心功能是: ? 属性监控与依赖跟踪 ? 声明式绑定 ? 模板机制 MVVM Model-View-View Model (MVVM)是一种创建用户界面的设计模式. ? Model:用于存储应用程序数据,表示业务领域的对象和数据操作,并且独立于任何界面. 当使用KO的时候,通常是

vue.js 入门

简单一句话来描述:vue.js是一个前端框架. 官方文档:https://cn.vuejs.org/v2/guide/index.html 虽然,我以前也会改一些前端样式,但主要是基于HTML和CSS,HTML主要控制页面的结构,CSS主要来控制样式.涉及到JavaScript就比较小白了. 我花了一个下午照着官方文档做练习,当然是只创建一个xxx_demo.html文件,在<script></script> 标签对之间写 Vue.js语法.这不算错,但在工程化的今天,这么学得猴年

JS高程3:JSON

JSON,JavaScript Object Notation,JS对象表示法,是目前最常见的结构化数据传输形式. JSON并非编程语言,而是一种数据结构,像mp4.avi一样,只是一种数据格式而已.(数据结构可以包含很多数据类型) JSON值的类型 简单值 对象 数组 简单值:字符串.数字.布尔值和null,注意不包括undefined. 注意:JSON中的字符串必须用双引号. 对象:对象就是无序的键值对,而键值中的值也可以是简单值.对象或者数组. 注意:JSON中对象的属性必须用双引号括起来

js装饰器

本文是廖雪峰老师js教程的学习笔记 JavaScript的所有对象都是动态的,即使内置的函数,我们也可以重新指向新的函数. 利用apply(),我们还可以动态改变函数的行为. 现在假定我们想统计一下代码一共调用了多少次parseInt(),可以把所有的调用都找出来,然后手动加上count += 1,不过这样做太傻了.最佳方案是用我们自己的函数替换掉默认的parseInt(): var count = 0; var oldParseInt = parseInt; // 保存原函数 window.p