说出this的三个应用
1.this是javascript中的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。 2.随着函数使用场合的不同,this的值会发生变化,但是有一个原则,就是this指的是调用函数的那个对象。 3.this分类 1)纯粹的函数调用 这时的this指向window。(函数没有所属对象:指向全局对象) eg: var x=1; function test(){ alert(this.x); } test(); 2)作为对象方法的调用 这时的this指向上级对象。(函数有所属对象时:指向所属对象) eg: function test(){ alert(this.x) } var o={}; o.x=1; o.m=test; o.m(); 3)作为构造函数调用 构造函数,就是通过这个函数生成一个新对象。这时的this指向这个新对象。(构造器中的 this:指向新对象) eg: function test(){ this.x=1; } var o=new test(); alert(o.x); var x=2; function test(){ this.x=1; } var o=new test(); alert(x); function foo(){return this.a}; var a=2; var o={a:3,foo:foo}; var p={a:4}; console.log(o.foo()); p.foo=o.foo; console.log(p.foo()); console.log(foo()); 4)apply或者call的调用 是改变函数对象的一个方法,作用是改变函数的调用对象。 eg: var x=0; function test(){ alert(this.x); } var o={}; o.x=1; o.m=test; o.m(); o.m.apply(); 例题
//1 var point={ x:0, y:0, moveTo:function(x,y){ this.x=this.x+x; this.y=this.y+y; alert(this.x); //1 alert(this.y); //1 } } point.moveTo(1,1); //2 var myObject = {value: 100}; myObject.getValue = function () { console.log(this.value); console.log(this); return this.value; }; console.log(myObject.getValue()); // 100 object{value: 100} 100 //3 var myObject = {value: 100}; myObject.getValue = function () { var foo = function () { console.log(this.value); console.log(this); }; foo(); return this.value; }; console.log(myObject.getValue()); //undefined window 100 //4 var SomeClass = function(){ this.value = 100; } var myCreate = new SomeClass(); console.log(myCreate.value); //100 //5 var myObject = {value: 100}; var foo = function(){ console.log(this); }; foo(); //window foo.apply(myObject); //object{value: 100} foo.call(myObject); //object{value: 100} //6var name = "clever coder";var person = { name : "foocoder", hello : function(sth){ var sayhello = function(sth) { console.log(this.name + " says " + sth); }; sayhello(sth); }}person.hello("hello world"); //clever coder says hello world //7var name = "clever coder";var person = { name : "foocoder", hello : function(sth){ var that = this; var sayhello = function(sth) { console.log(that.name + " says " + sth); }; sayhello(sth); }}person.hello("hello world"); foocoder says hello world
//1 var point={ x:0, y:0, moveTo:function(x,y){ this.x=this.x+x; this.y=this.y+y; console.log(this.x); console.log(this.y); } }; point.moveTo(1,1); //1 1
//2 var myObject = {value: 100}; myObject.getValue = function () { console.log(this.value); console.log(this); return this.value; }; console.log(myObject.getValue()); //100 object 100
//3 var myObject = {value: 100}; myObject.getValue = function () { var foo = function () { console.log(this.value); console.log(this); }; foo(); return this.value; }; console.log(myObject.getValue());//undefined window 100
//4 var SomeClass = function(){ this.value = 100; } var myCreate = new SomeClass(); console.log(myCreate.value); //100
//5 var myObject = {value: 100}; var foo = function(){ console.log(this); }; foo(); //window foo.apply(myObject);//Object foo.call(myObject); //Object
//6var name = "clever coder";var person = { name : "foocoder", hello : function(sth){ var sayhello = function(sth) { console.log(this.name + " says " + sth); }; sayhello(sth); }}person.hello("hello world"); //clever coder says hello world
//7var name = "clever coder";var person = { name : "foocoder", hello : function(sth){ var that = this; var sayhello = function(sth) { console.log(that.name + " says " + sth); }; sayhello(sth); }}person.hello("hello world"); //foocoder says hello world
//8var name="window";var Bob={ name:"Bob", showName:function(){ alert(this.name); }};var Tom={ name:"Tom", showName:function(){ var fun=Bob.showName; fun(); }}Tom.showName(); //window
//9var name="Bob";var nameObj={ name:"Tom", showName:function(){ alert(this.name); }, waitShowName:function(){ !function(__callback){ __callback(); }(this.showName); }}nameObj.waitShowName(); //Bob
var name="Bob"; var nameObj={ name:"Tom", showName:function(){ alert(this.name); }, waitShowName:function(){ var that=this; setTimeout(function(){ that.showName(); },1000); } };nameObj.waitShowName(); //Tom
转载于:https://www.cnblogs.com/l742314100/p/5933889.html
说出this的三个应用相关推荐
- 1. 变量提升 2. 条件语句 3. 循环语句 弹出框的三种形式 If条件的种类...
1. 变量提升 变量提升是浏览器的一个功能,在运行js代码之前,浏览器会给js一个全局作用域叫window ,window分两个模块,一个叫内存模块,一个叫运行模块,内存模块找到当前作用域下的 ...
- [答疑]业务序列图推导出系统的三个用例注册SIM卡、申请激活、审核激活申请
软件方法(下)分析和设计2021版本连载-第8章 分析类图(1)>> 勤瘦(216***56) 10:29:41 从业务序列图推导出系统的三个用例注册SIM卡.申请激活.审核激活申请 勤瘦 ...
- Layui弹出层的三项选择
以Layu.msg()为例. layer.msg('大部分参数都是可以公用的<br>合理搭配,展示不一样的风格', {time: 20000, //20s后自动关闭btn: ['明白了', ...
- JS弹出对话框的三种方式
javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行交互的js代码 ...
- 走出“搜索引擎营销”三个误区
一说起搜索引擎营销(付费竞价排名),更多从业者会将其与排名.流量.甚至销量挂钩,孰不知,搜索引擎营销也与品牌息息相关. 1.搜索引擎营销三个误区 经过长时间的观察,发现众网站在搜索引擎营销方面有三个误 ...
- 老域名优化出新招,三点技巧来相助
网站的SEO优化通常都是在网站建设完成之后就打下了优化的基础,但随着时代的发展和互联网搜索引擎算法的不断更新和升级,一些年龄较大的网站在进行老域名SEO优化时,会做出相应的网站调整,所以要跟随时代更新 ...
- 亚洲新首富出炉!富豪榜单大洗牌,马云3年来首次跌出中国前三
3月2日,胡润研究院发布<2021胡润全球富豪榜>,上榜企业家财富计算截止日期为2021年1月15日.这是胡润研究院连续第十年发布"全球富豪榜". 2020年新冠肺炎疫 ...
- JavaScript实现弹出浏览器的三种提示框:提示信息框、确认框和输入文本框
浏览器的三种提示框 1.alert()提示信息框 2.confirm()提示确认框 3.prompt()提示输入文本框 1.alert()提示信息框 效果图: 实现代码: <script> ...
- 分享:JavaScript弹出对话框的三种方式
转载自品略图书馆 http://www.pinlue.com/article/2019/11/2023/069810461833.html 学习过js的小伙伴会发现,我们在一些实例中用到了alert( ...
- JavaScript弹出对话框的三种方法
三种方法 alert(); 最简单,将alert();括号内的内容弹出. confirm(); 与alert();类似,包含确认和取消按钮,点击确定confirm();方法会返回true,点击取消co ...
最新文章
- 1057. Stack (30)
- flink 7-提交任务
- 在已安装win10环境中利用EasyBCD引导安装Ubuntu18.04(亲自测试,都是血和泪)
- Jzoj4891 摆书
- 语音对话平台海尔五代智能电视落地
- HALCON:如何结合面向对象和面向过程的代码
- day02.2-常用Linux命令整理
- OpenCV 人脸识别、图片相似度检测
- java执行maven命令
- excel如何把多张表合并成一个表_如何将多个 Excel 工作簿的工作表合并成一个工作表?...
- linux的lilo,深入Linux的LILO
- oracle公司的crm有哪些主要模块,Oracle CRM 的组成及各模块的功能
- 阅读笔记:Single Shot Multibox Detector(SSD)
- 红帽与Cloudera结成大数据联盟 释放企业级Hadoop潜能
- unix time stamp(时间戳)和常规时间相互转换的C++代码
- Fedora最新下载地址
- ctf ordinary keyboard的加密问题
- PLC编程入门梯形图实例讲解
- App Store 3月下载量下滑
- CentOS 安装Vim 编辑器