JavaScript 写几个简单的知识点
首先,还是用比较官方的文字描述来解释下JavaScript:
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
JavaScript拥有以下几个特点:
· 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
· 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
· 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
· 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
· 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
JavaScript由以下部分组成:
· ECMAScript,描述了该语言的语法和基本对象。
· 文档对象模型(DOM),描述处理网页内容的方法和接口。
· 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。
JavaScript都有哪些数据类型?
· object object中又有 Function、String、Array、Object、Date等等
· string
· number
· null
· boolean
· undefined
下面部分代码来证明下以上所说:
String、Number是对象,string、number是不同的数据格式...
var str = "abc";
var Str = new String("abc");
var num = 100;
var Num = new Number(100);
console.log(typeof str, typeof Str, typeof num, typeof Num); // string object number object
对象原型链是个啥?
当我们用new一个对象 (使用构造函数创建) 或者用Object.create创建对象时,那么这个对象将会有原型和原型链。
比如:我们创建个构造函数_obj,然后通过_obj来new一个obj,那么这时的原型链就是:obj → _obj → Object.prototype→ null。
让我们通过代码来说明吧:
function _obj(){};
_obj.prototype.name = "野兽"; //每个函数都包含一个prototype属性,这个属性指向一个对象的引用,这个对象就是“原型对象”。
_obj.prototype.age = 21;
_obj.prototype.sayHello = function(){
console.log("Hello "+this.name);
};
var obj = new _obj();
console.log(obj); //_obj{} 而其的__proto__里包含了_obj里的各个属性,包括name,age,sayHello
console.log(obj.__proto__ == _obj.prototype); //true
obj.sayHello(); // Hello 野兽
console.log(Object.prototype.__proto__); // null 当我们追究到Object(也就是object的源头时)其指向的是null
值的注意的是:Object.create(null)的原型链直接为null,也就是说人家的原型链短的很呢...
JavaScript中作用域怎么玩?
当我们在JavaScript中使用var声明一个变量,其实就是在该作用域所指向的对象添加一个属性及属性值。
在JavaScript中不存在块级作用域,在当前作用域内声明的变量也只有在当前作用域及当前作用域内的函数内可用,而在函数内声明的变量只适用于该函数内(如果不做操作),在函数外部调用该变量将会报错not defined。
让我们跑一跑代码来认识下作用域:
var firstNum = 1;
~function(){
var secondNum = 2;
console.log("在里面打印:"+firstNum ,secondNum); // 在里面打印:1 2
}();
console.log("在外面打印:"+firstNum ,secondNum); // Uncaught ReferenceError: secondNum is not defined(…)
作用域也有作用域链:
var firstNum = 1;
console.log("在最外层打印:"+firstNum); // 在最外层打印:1
~function(){
var secondNum = 2;
console.log("在中间层打印:"+firstNum,secondNum); // 在中间层打印:1 2
~function(){
var thirdNum = 3;
console.log("在最里层打印:"+firstNum,secondNum,thirdNum); // 在最里层打印:1 2 3
}();
console.log("在中间层打印:"+firstNum,secondNum,thirdNum); // Uncaught ReferenceError: thirdNum is not defined(…)
}();
console,log("在最外层打印:"+firstNum,secondNum,thirdNum); // 由于上面已经报错,而浏览器执行JavaScript又是单线程的,所以压根没执行到这句...
也就是说,在当前作用域声明的变量将会在其子...子子子作用域还是一直能用,爽歪歪吧,哈哈...
闭包是什么?怎么玩?
函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的。为了实现这种词法作用域,JavaScript函数对象的内部状态不仅包含函数的逻辑代码,还必须引用当前的作用域链。函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数的作用域内,这种特性其实就是“闭包”。
继续来看代码吧:
function counter(){
var num = 0;
return {
count : function(){ return num++; },
reset : function(){ return num = 0; }
}
};
var firstNum = counter();
var secondNum = counter();
console.log(firstNum.count()); //
console.log(secondNum.count()); //
firstNum.reset();
console.log(firstNum.count()); // 0 num已被重置,所以返回的为0
console.log(secondNum.count()); // 1 num未被重置,所以返回的是1
console.log(firstNum,secondNum); // 都为 Object{ count:function(),reset:function(),__proto__} 并且并不能在其中找到counter里var的n,这也实现了函数里的私有变量,只将需要暴露的两个方法给暴露在外。
闭包用的多的两个作用:读取函数内部的变量值;让这些变量值始终保存着(在内存中)。
同时需要注意的是:闭包慎用,不滥用,不乱用,由于函数内部的变量都被保存在内存中,会导致一定的内存消耗。
JavaScript中的this
在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是,指向该函数所属的对象。
全局的this → 指向的是Window
函数中的this → 指向的是函数所在的对象
对象中的this → 指向其本身
验证代码:
console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 全局下执行console.log,所以此处指向的是Window
~function seeThis(){
console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 由于我是在全局下写的这个函数,所以此处指向的还是Window
}();
var obj = {
name:"野兽",
showThis:function(){
console.log(this); // Object {name: "野兽",showThis:function(),__proto__} 此处打印的是对象本身
}
};
obj.showThis();
arguments
在Javascript函数体内,arguments像数组一样(并不是真的数组),有length属性,可以代表传给函数的参数的个数。简单来说,arguments函数执行时所传的实际参数。比如:arguments[0]表示传入第一个参数。
用代码验证:
function argumentsTest(){
console.log(arguments[0]?arguments[0]:"Hello World",arguments[1]?arguments[1]:"你好 世界")
};
argumentsTest(); // Hello World 你好 世界
argumentsTest("This is firstValue => arguments[0].","This is secondValue => arguments[1]."); // This is firstValue => arguments[0]. This is secondValue => arguments[1].
暂时写就这些了,翻了翻半年前的写的ppt,找到了这些知识点的总结,想了想再温习一次~
JavaScript 写几个简单的知识点的更多相关文章
- 闲来无事,用javascript写了一个简单的轨迹动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript,一个超级简单的方法判断浏览器的内核前缀
先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断. 大家应该还记得JavaScript行内样式怎么写吧?(看来我是 ...
- 用javascript写原生ajax(笔记)
AJAX 的全名叫做 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...
- Javascript中的Form表单知识点总结
Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...
- JavaScript写一个连连看的游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...
- 原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
- 用JavaScript写一个区块链
几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...
- 怎么分别javascript写在<head>里还是<body>里面?
怎么分别javascript写在<head>里还是<body>里面? 具体哪些语句写在<body>里,哪些语句写在<head>里 满意答案 BeginN ...
- 怎么用JavaScript写一个区块链?
几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...
随机推荐
- xml入门
1.why xml? 如果说JSON是一种轻量级的数据交换格式,那么xml就是重量级的.xml应用于web开发的许多方面,常用于简化数据的存储和共享.永远要记住,xml跟JSON一样是用来存储和传输数 ...
- java并发:线程同步机制之计数器&Exechanger
第一节 CountDownLatch (1)初识CountDownLatch (2)详述CountDownLatch CountDownLatch是通过一个计数器来实现的,计数器的初始值为线程的数量. ...
- MATLAB实现频数直方图——hist的使用
"hist" is short for "Histogram(直方图.柱状图)". 1.N = hist(Y) bins the elements of Y ...
- C#,JavaScript两种语言 2048小游戏
<html> <head> <style type="text/css"> .haha { border-width: 2; font-size ...
- jQuery——$(function(){});与$(document).ready(function(){});的区别
只要在我们的jsp页面中写上 <script> $(function(){ //内容 }); </script> 则,函数中的内容就会在jsp页面被载入的时候就被执行,实际上, ...
- ElasticSearch入门系列(三)文档,索引,搜索和聚合
一.文档 在实际使用中的对象往往拥有复杂的数据结构 Elasticsearch是面向文档的,这意味着他可以存储整个对象或文档,然而他不仅仅是存储,还会索引每个文档的内容使之可以被搜索,在Elastic ...
- Yii2 使用小部件 Breadcrumbs
yii有两种Breadcrumbs写法,one: echo Breadcrumbs::widget([ 'itemTemplate' => "<li><i>{l ...
- Oracle之物化视图
来源于:http://www.cnblogs.com/Ronger/archive/2012/03/28/2420962.html 近期根据项目业务需要对oracle的物化视图有所接触,在网上搜寻关于 ...
- Eclipse运行内存溢出
VM arguments中添加如下: -Xms512m-Xmx1024m-XX:PermSize=256m-XX:MaxPermSize=256m-Xmn128m
- 设计模式之UML类图的常见关系
设计模式之UML类图的常见关系 本文来自转载 烧点饭博客 本篇会讲解在UML类图中,常见几种关系: 泛化(Generalization),依赖(Dependency),关联(Association), ...