JavaScript 高级扩展

- 作用域相关
1.
function func(){
if(1==1){
var v= 123;
}
console.log(v);
}
func()
A. 报错(Java,C#) B. 123(python,对) C.undefined
=》 JavaScript/python是以函数为作用域,非括号为作用域
=》 Java,C#以括号为作用域
2.
xo = ‘root1‘;
function func(){
var xo = ‘root2‘;
function inner(){
console.log(xo);
}
inner();
}
func();
作用域链
// root2
3.

xo = ‘root1‘;
function func(){
var xo = ‘root2‘;
function inner(){
console.log(xo);
}
return inner;
}
result = func();
result();
// 作用域链在函数调用之前已经创建,当寻找变量时,根据最开始创建的作用域查找
// root2

4.
xo = ‘root1‘;
function func(){
var xo = ‘root2‘;
function inner(){
console.log(xo);
}
var xo = ‘root3‘
return inner;
}
xo = "root4"
result = func();
result();

//root 3

5.
var xxxx;
console.log(xxxx);

function func(){
console.log(xo);
var xo = ‘123‘;
console.log(xo);
}
func()
// 提前声明,JS特有的
1. 预编译:
var xo; 令xo=undefined;
2. 执行

6.
function func(num){
console.log(num); // function
num = 18;
console.log(num); // 18

function num(){
}
console.log(num); // 18
}
func(666);

a. 预编译 AO active object 活动对象
先编译参数:
AO.num = undefined
AO.num = 666
再编译变量:
如果AO中有num,则不做任何操作
否则 AO.num = undefined
最后编译函数:
AO.num = function num(){
}

b. 执行

7.

function func(num){
console.log(num); // function
function num(){
}
console.log(num); // function
num = 18;

console.log(num); // 18
}
func(666);

先编译参数:
AO.num = undefined
AO.num = 666
再编译变量:
如果AO中有num,则不做任何操作
否则 AO.num = undefined
最后编译函数:
AO.num = function num(){
}

8.
function func(){
console.log(xo);
var xo = 123;
}
func()

编译:
参数:
AO为空
变量:
AO.xo = undefined
执行:

- 函数和面向对象相关
1.
function func(arg){
console.log(this,arg);
}
func(18);
// func.call(window,20);
// func.apply(window,[30]);

(function(arg){
console.log(this,arg);
})(123)

在函数被执行时,默认this是代指window对象

function func(){
window.nn = ‘root‘;
//nn = ‘root‘;
this.nn = ‘root‘;
}
func()
console.log(nn);

=====>
a. 在函数内部,默认都有this变量。默认情况下,执行函数时 this=window
b. 使用 函数名.call 或者 函数名.apply 可以对函数中的this主动设置值

document.getElementById(‘id‘).onclick = function(){
// this
}

document.getElementById(‘id‘).onclick.call(DOM对象)

2. 在JS中么有字典类型
只有对象伪造成字典形式

var dict = {
name: ‘alex‘,
age: 18
}
等价于
var dict = new Object(); # 表示创建空字典
dict.name = ‘alex‘;
dict.age = 18;

function Foo(name){
this.Name = name
}

Foo(‘root‘) # 当做函数时,this默认是window
var dict1 = new Foo(‘root1‘) # 当做类时,this是 dict1 同py self
// Foo.call(dict1,‘root1‘)
var dict2 = new Foo(‘root2‘) # 当做类时,this是 dict2

====
function Foo(name){
this.Name = name;
this.Func = function(){
console.log(this.Name);
}
}
# 当做函数
Foo(‘root1‘)
window.Name
window.Func()

# 当做类
obj = new Foo(‘root2‘)
obj.Name
obj.Func()

# 直接对象
dict = {
Name: ‘root3‘,
Func: function(){
console.log(this.Name);
}
}

# dict = new Object();
# dict.Name = ‘root3‘;
# dict.Func = function(){
console.log(this.Name);
}
dict.Func()
==========================》 谁调用函数,this就是谁。 函数()执行时候默认window.函数()

谁调用函数,this就是谁。 函数()执行时候默认window.函数()
每一个函数里都有一个this
Name = ‘666‘;
var dict = {
Name: ‘root‘,
Age: 18,
Func: function(){
// this等于dict
console.log(this.Name); // root

function inner(){
console.log(this.Name); // 666
}
window.inner();
}
}

dict.Func();

============================
谁调用函数,this就是谁。 函数()执行时候默认window.函数()
每一个函数里都有一个this
变量查找顺序,作用域链
Name = ‘666‘;
var dict = {
Name: ‘root‘,
Age: 18,
Func: function(){
// this等于dict
console.log(this.Name); // root
// that 等于dict
var that = this;

function inner(){
// this=window
console.log(that.Name); // root
}
window.inner();
}
}

dict.Func();

3. 原型

function Foo(name){
this.Name = name;
}
// 原型
Foo.prototype = {
Func: function(){
console.log(this.Name);
}
}

obj1 = new Foo(1)
obj2 = new Foo(2)
obj3 = new Foo(3)

时间: 2024-11-08 22:52:20

JavaScript 高级扩展的相关文章

javascript高级程序设计 第十一章--DOM扩展

javascript高级程序设计 第十一章--DOM扩展DOM最主要的扩展就是选择符API.HTML5和Element Traversal Selectors API:定义了两个方法 querySelector() 和 querySelectorAll(),能够基于CSS选择符从DOM中取得元素.querySelector()方法接收一个CSS选择符,返回该模式匹配的第一个元素,querySelectorAll()接收的参数一样,但是返回NodeList实例: matchesSelector()

javascript高级程序设计--简介

工作一年多了,这一年的收获真是丰富.结识了许多同事朋友,技术网友,学了许多新的技术知识:当然还要感谢我的朋友们,感谢我的第一家公司. 大学主要学的.net,刚毕业那会对javascript的了解几乎就是空白,后来有机会接触了百度地图,开始了javascript学习之路.现在在项目中也能熟练的使用javascript,jquery等技术,可总感觉缺点什么,有些东西你知道是什么,也能写出来,但就是不知道他是什么,他的原理是什么样的.所以才有了现在的想法,系统的学习一遍javascript.---文笔

javascript高级程序设计 第十三章--事件

javascript高级程序设计 第十三章--事件js与HTML的交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:事件流描述的是从页面中接收事件的顺序,IE的是事件冒泡流,Netscape的是事件捕获流,这个两个是完全相反的事件流概念. 事件冒泡:由最具体的元素接收,然后逐级向上传播到更高级的节点,即事件沿DOM树向上传播,直到document对象. 事件捕获:不大具体的节点应该更早接收到事件,相当于沿DOM节点树向下级传播直到事件的实际目标,在浏览器中,是

javascript高级特性

01_javascript相关内容02_函数_Arguments对象03_函数_变量的作用域04_函数_特殊函数05_闭包_作用域链&闭包06_闭包_循环中的闭包07_对象_定义普通对象08_对象_定义函数对象09_对象_内建对象10_原型_为函数对象增加属性或方法11_原型_利用函数对象本身重写原型12_继承_函数对象之间的继承13_继承_普通对象之间的继承 javascript高级特性(面向对象): * 面向对象:   * 面向对象和面向过程的区别:     * 面向对象:人就是对象,年龄\

JavaScript高级程序设计35.pdf

遍历 "DOM2级遍历和范围"模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker,两个类型能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作,与DOM兼容的浏览器都可以访问到这些类型的对象,IE不支持DOM遍历 使用以下代码检测浏览器对DOM2级的遍历支持情况: var supportsTraversals=document.implementation.hasFeature("Traversal&q

JavaScript高级程序设计29.pdf

insertAdjacentHTML方法 插入标记最后一个新增的方式是insertAdjacentHTML()方法,它接收两个参数:插入位置和要插入的HTML文本,第一个参数必须是下列值之一: "beforebegin",在当前元素之前插入一个相邻的同辈元素: "afterbegin",在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素: "beforeend",在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子

JavaScript高级编程随笔

前言: 本人之前在博客园写过一遍关于MVC基础的一个小文章,由于当时各种原因没能继续坚持写下去,最近本人在学习JavaScript,想用自己的方式整理出来,主要是为了加深自己的印象,我还是一个前端的小学生,希望各位前端的前辈多指点.我会吧每一章节学到的看到的整理到我的博客园里,虽然这本书前面讲的很基础,我也会坚持发表文章.好了废话说到这里开始进入正题. Content: 本人现在准备要看的第一本书是<JavaScript高级编程>[第三版],这是一本比较经典的JS书籍,即使前面几章比较简单基础

JavaScript高级---装饰者模式设计

一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生产对象,实现解耦. 桥接模式 : (桥接模式是一种既能把两个对象连接在一起,又能避免二者间的强耦合的方法.通过“桥”把彼此联系起来,同时又允许他们各自独立变化) 主要作用:主要作用表现为将抽象与其实现隔离开来,以便二者独立化. 组合模式 : (组合模式是一种专门为创建Web上的动态用户界面而量身制定

JavaScript高级程序设计38.pdf

比较DOM范围 在有多个范围的情况下,可以使用compareBoundaryPoints()方法来确认这些范围是否有公共的边界,接收两个参数:表示比较方式的常量值和要比较的范围 常量如下 Range.START_TO_START(0):比较第一个范围和第二个范围的起点:Range.START_TO_END(1):比较第一个范围的起点和第二个范围的终点:Range.END_TO_END(2):比较第一个范围和第二个范围的终点:Range.END_TO_START(3):比较第一个范围的终点和第二个