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 ...
随机推荐
- Data URI 应用场景小结
Data URI scheme 在前端开发中是个常用的技术,通常会在 CSS 设置背景图中用到.比如在 Google 的首页就有用到: Data URI scheme 简称 Data URI,经常会被 ...
- [云上天气预报-有时有闪电]2月3日23:00-4:00阿里云SLB升级期间网络会闪断
大家好,2月3日23:00-2月4日4:00,阿里云将对SLB(负载均衡)进行升级,在升级期间,SLB会有约4-8次的网络闪断.由此给您带来麻烦,望谅解! 阿里云官方公告内容如下: 尊敬的用户: 您好 ...
- suggest插件实现下拉选择筛选
实现的效果展示: 代码如下: 1.需要引入jquery,bootstrap-suggest.js,bootstrap.min.css 2.html页面代码: <!DOCTYPE html> ...
- 【Python】 [基础] list和tuple
list 类型,这不就是js里的数组吗,,最后一个元素索引是 -1list是一个可变的有序的表,#追加.append('admin')#插入.insert(1,'admin')#删除末尾元素.pop( ...
- Swift&NodeJS 使用Alamofire进行Post(zhuan)
这篇博客主要实现Swift客户端和NodeJS后台的Post.Get请求实现. 我是一个略有点讨厌重复使用工具的人,比如这些基本功能完全可以用OC和PHP等替代,但是没办法,现在知识更新的太快啦,Sw ...
- 54-locate 简明笔记
在mlocate数据库中搜索条目 locate [option] pattern 参数 pattern 是locate需要搜索的文件名或者正则表达式 选项 -i 忽略大小写 ...
- yii2干货
Sites 网站 yiifeed:Yii 最新动态都在这里 yiigist:Yii 专用的 Packages my-yii:Yii 学习资料和新闻 Docs 文档 Yii Framework 2.0 ...
- C++命名规范
1.1 类型名 首字母大写,末尾加_T.如: class TnppCoverageArea_T{…}; 1.2 1.2 变量和函数名 变量和函数名中首字母小写,其后每个英文单词的第一个字母 ...
- auto refresh iframe
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- 十天冲刺---Day10
站立式会议 站立式会议内容总结: 燃尽图 照片 没课的周三,队员们共同在活动室奋战了一个下午 继续保持迭代,在周六前完成alpha版本