javaScript

最新推荐文章于 2024-05-03 23:30:14 发布

39°风

最新推荐文章于 2024-05-03 23:30:14 发布

阅读量137

点赞数

分类专栏：初级开发工程师文章标签： BOM DOM JavaScript 理解JavaScript this

本文链接：https://blog.csdn.net/weixin_43864336/article/details/100163736

版权

初级开发工程师专栏收录该内容

9 篇文章 0 订阅

订阅专栏

javaScript 目的：理解this语法

学JavaScript之前先来了解几个概念

BOM：BOM指的是浏览器对象模型。
浏览器加载页面时会创建一个全局的对象放在内存中，被JavaScript用来和浏览器交互。这个对象就是windows(窗口)，他是所有对象的祖先，可以类比理解为java中的object对象。
JavaScript中的全局函数和全局变量便是windows的方法和属性，DOM也是Windows的属性。用的时候可以省略windows直接用。
BOM没有官方标准，不同于DOM的标准化组织是W3C，JavaScript的语法标准化组织是ECMA，所以不同浏览器都有自己实现BOM的方法，所以会有兼容问题。
但是但是为了利用JavaScript完成交互，现代浏览器几乎都实现了相同的方法和属性，这些方法和属性被称作BOM的方法和属性。
DOM:：文档对象模型
Document 对象
当浏览器载入 HTML 文档, 它就会成为 document 对象。
document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

JavaScript语法

JavaScript中的函数相当于java中的方法，但是不用写再哪个类中，可以通过事件来绑定函数
JavaScript写在script标签中，因为浏览器由上而下的加载html语句，所以注意书写位置。

上代码：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 函数</h1>

<p>函数存储在变量后，变量可以用作函数：</p>

<p id="demo"></p>
<p id="demo1"></p>

<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
document.getElementById("demo1").innerHTML = x(4,3);
</script>

</body>
</html>

运行结果
在这里插入图片描述
括号的重要性：上述代码中，注意innerHTML X变量时x和x()一个是输出方法体一个是输出方法返回值（运行了方法）。

上代码

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 数值</h2>

<p>写数值有无小数点均可。</p>

<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var car = "porsche";
var obj = {
  foo: function () {var car = "123";
  console.log("日志"); return car;}
};
var a = obj.foo()
var b = obj.foo()
var c = obj.foo()
document.getElementById("demo").innerHTML = obj.foo
document.getElementById("demo1").innerHTML = a
document.getElementById("demo2").innerHTML = obj.foo()
</script>

</body>
</html>

结果图
在这里插入图片描述
控制台图:

上述代码中涉及点：
问题：为什么会有四个日志打印？
答：因为方法运行是在你声明变量时就运行了，最后innerHTML时，只是输出的运行后的结果，并不运行方法，也就是现在的abc变量里现在存的是方法运行完的结果值。所以日志输出了四个。分别是abc变量和demo2调用的方法输出的。
上述中变量obj此时代表一个对象，相当于java中的类，该对象名就是变量名obj，变量里可有属性（此处没写），可有方法。。