JavaScript中的this妙用

jayzou 发布于2019-08-19 17:47 / 3017人阅读

摘要：关键字始脚本能够根据使用这个关键字的上下文将值传递给函数。替我们完成的工作之一是从链接获得也就是标签的属性。实际上，可以让站点上的所有链接都调用这个相同的代码，这一行代码都会自动获得相应的值。

JavaScript关键字this始JS脚本能够根据使用这个关键字的上下文将值传递给函数。
我们先来看如下一个网页，在用户单击链接之后，弹出一个alert框，然后再转到href属性所指的网页
HTML：

JavaScript中的this妙用

你好，点击这里去旧物商店

JS：

window.onload = initAll;
function initAll(){
    document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect(){
    alert("这是我创建的旧物商城，欢迎访问！");
    window.location = this;
    return false;
}

在线演示

你可能会主要到，代码中并没有引用特定的网页——这是this关键字的作用之一。this替我们完成的工作之一是从HTML链接获得URL（也就是a标签的href属性）。由于采用这种方式，如果以后脚本改为指向其他的页面而不是旧物商店页面，就不必修改JS。实际上，可以让WEB站点上的所有链接都调用这个相同的JS代码，这一行代码都会自动获得相应的href值。
这样写还有一个好处：如果用户的浏览器不理解JavaScript（比如禁用了JS）,那么它只会加载HTML页面，而不显示alert提示，当他们点击链接时，会像一般情况下那样加载页面，不会发生错误，没有任何问题。
我们在来看一个switch/case例子，创建如下页面：

HTML：




    
    JavaScript中的this妙用
    


    闲置二手图书

JS:

window.onload = initAll;
function initAll(){
    document.getElementById("Java").onclick = viewDetail;
    document.getElementById("JavaScript").onclick = viewDetail;
    document.getElementById("MySQL").onclick = viewDetail;
    document.getElementById("Html").onclick = viewDetail;
}
function viewDetail(){
    console.log("this.id="+this.id);
    switch(this.id){
        case "Java" : 
            alert("《Java程序员基本功》这本书是李刚写的，在我的商店售价30元！");
            break;
        case "JavaScript" : 
            alert("《JavaScript语言精粹》这本书是Yahoo的一位工程师写的，在我的商店售价15元！");
            break;
        case "MySQL" : 
            alert("《MySQL入门很简单》这本书附带关盘，这个年代其实没什么卵用了，它在我的商店售价28元！");
            break;
        case "Html" : 
            alert("《HTML5秘籍》这本书是图灵系统的图书，非常值得拥有，它在我的商店售价25元，卖的非常好！");
            break;
        default : 
            alert("没有这本书");
    }
}

在线演示
直接用this.id作为switch的参数也是可以的。

GPU云服务器云服务器 javaScript中的this js中的this js中的this机制 js中的this与html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78835.html

Javascript中数组方法reduce的妙用之处

摘要：数组方法中，相比等常用的迭代方法，常常被我们所忽略，今天一起来探究一下在我们实战开发当中，能有哪些妙用之处，下面从语法开始介绍。按顺序运行异步函数我们可以做的另一件事是按顺序运行而不是并行。函数返回一个对象，可以使用方法添加回调函数。 showImg(https://segmentfault.com/img/remote/1460000019423051); Javascript数组方...

yiliang 2019-08-23 18:01 评论0 收藏0
React 应用设计之道 - curry 化妙用

摘要：右侧展现对应产品。我们使用命名为的对象表示过滤条件信息，如下此数据需要在组件中进行维护。因为组件的子组件和都将依赖这项数据状态。化应用再回到之前的场景，我们设计化函数，进一步可以简化为对于的偏应用即上面提到的相信大家已经理解了这么做的好处。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

sewerganger 2019-08-22 16:27 评论0 收藏0
React 应用设计之道 - curry 化妙用

摘要：右侧展现对应产品。我们使用命名为的对象表示过滤条件信息，如下此数据需要在组件中进行维护。因为组件的子组件和都将依赖这项数据状态。化应用再回到之前的场景，我们设计化函数，进一步可以简化为对于的偏应用即上面提到的相信大家已经理解了这么做的好处。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

LinkedME2016 2019-08-02 10:14 评论0 收藏0
javascript-从toString方法在判断复杂数据类型上的妙用，引申到对原型链的理解

摘要：所以，当我们使用时，不能进行复杂数据类型的判断，因为它调用的是，虽然也继承自，但在上重写了，而我们通过实际上是通过原型链调用了。关于 toString 方法在有关js的开发中使用应该是相当广泛的，这两天在看jQuery的源码，从 toString 本身了解与巩固了不少知识，写出来与大家一同分享。首先先上一段代码： var arr=[1,2,3]; toString.call(arr)...

sean 2019-08-20 10:41 评论0 收藏0