JavaScript高级部分-创新互联
一、代码模块
成都创新互联专注于曲沃企业网站建设,响应式网站开发,购物商城网站建设。曲沃网站建设公司,为曲沃等地区提供建站服务。全流程专业公司，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务1.js里面代码可以放在不同的文件里, 称为模块
2.一个模块需要引用其他模块代码的时候,使用require()
3.require:
(1)如果是第一次调用,那么就加载,执行脚本
(2)每个代码模块由module.exports导出的对象
(3)每次require的时候,都返回module.exports(模块出口)
他可以指向任何类型, 函数,对象, 值.....
4.requirefunction Person(name,height){
this.name=name;
this.height=height;
this.hobby=function(){
return 'watching movies';
}
}
var boy=new Person('keith',180);
var girl=new Person('rascal',153);
console.log(boy.name); //'keith'
console.log(girl.name); //'rascal'
console.log(boy.hobby===girl.hobby);//false
, 如果是第一次执行,他就把
js里所有代码加载进来, 在执行这整个js文件, 然后返回module.exports.
require得到的就是module.exports指向的对象.
5.如果不是第一次require,他就直接返回module.exports.
二、this
显示传递this call
1.每个函数都包含两个非继承而来的方法：call()方法和apply()方法。
(1)相同点: 两个方法的作用是一样的
(2)不同点: 接收参数的方式不同.
2.作用:
.在特定的作用于中调用函数,等于设置函数体内this对象的值,
扩充函数赖以运行的作用域
(1)call方法使用
function test_func(name,sex){
this.name = name;
this.sex = sex;
}
var xiaoming = {};
test_func.call(xiaoming func,"xiaoming",10);
console.log(xiaoming);(2)apply使用 两个参数 一个是函数的作用域(this),另一个是参数数组.
function test_func(name,sex){
this.name = name;
this.sex = sex;
}
var xiaoming = {};
test_func.apply(xiaoming,["xiaoming",10]);
console.log(xiaoming);3.隐式传递this
这个this就是对象, 也就是对象直接调用,this被隐式传到函数里,
var xiaohong = {
name: "xiaohong",
test_func: function(){
console.log(this);
},
}
xiaohong.test_func();4.强制传递绑定this
强制设置函数体this的值, 参数是一个表.
但是对象却不会引用这个函数>
var func = function(){
console.log(this);
}.bind(xiaohong);
func();5.定义完函数体,在绑定对象。
在定义完函数体后, 这个函数对象的this一定不是绑定的;
因为,函数对象来绑定对象的时候,不是把对象绑定到func函数对象里,
而是产生了一个新的函数对象,然后返回这个函数对象.
(1)错误,没有获得绑定好的函数对象
func = function(){
console.log(this);
}
func.bind(xiaohong);(2)正确,先获得绑定好的函数对象,再调用
func = function(){
console.log(this);
}
func = func.bind(xiaohong);
func();7.优先级
(1)绑定的优先级 大于 隐式传递
绑定一般用在回调函数。
var xiaohong = {
name: "xiaohong",
test_func: function(){
console.log(this);
}.bind(5),
}
xiaohong.test_func(); //输出的是5(2)显示传递 大于 隐式传递
强制 > 显示 > 隐式
三、实现面向对象
.在javascript中不存在类的概念, 而是通过 构造函数
和原型链(prototype chains)实现的
function person(name, sex){
this.name = name;
this.sex = sex;
}
person.prototype.test_func = function(){
console.log("person test_func");
console.log(this);
}
var p = new person("xiaohong",10);
console.log(p);
var p2 = new person("xiaotian",12);
console.log(p2);
p.test_func();
p2.test_func();构造函数
(1)构造函数提供一个生成对象的模板并描述对象的基本结构,
一个构造函数可以生成多个对象,每个对象都有相同的结构,
构造函数就是对象的模板, 对象就是构造函数的实例,
构造函数特点:
a:内部使用的this对象,指向要生成的对象实例，
b:使用new操作符来调用构造函数,并返回对象实例,
(2)构造函数的缺点: 同一个对象实例之间, 当你new调用构造函数
返回一个实例的时候,里面的所有函数都会新创建出来, 这个函数
都是一个新创建的函数, 是不被实例共享的, 这样很浪费资源.
function Person(name,height){
this.name=name;
this.height=height;
this.hobby=function(){
return 'watching movies';
}
}
var boy=new Person('keith',180);
var girl=new Person('rascal',153);
console.log(boy.name); //'keith'
console.log(girl.name); //'rascal'
console.log(boy.hobby===girl.hobby);//falseprototype属性
(1) 为了解决构造函数的对象之间无法共享属性的缺点,js提供了prototype属性.
(2)js中所有类型都是对象,(除了null和undefined),而每个对象都继承自另一个
对象, 称为"原型"对象 (prototype object) , null没有原型对象,
(3)原型对象上的所有属性和方法,都会被对象实例所享.
(4)通过构造函数生成对象实例时, 会将对象实例的原型指向构造函数
的prototype属性, 每一个构造函数都有一个prototype属性,
这个属性就是对象实例的原型对象,
(5)对于构造函数prototype是作为构造函数的属性,对于对象实例来说
prototype是对象实例的原型对象, 所以prorotype即是属性,又是对象.
function Person(name,height){
this.name=name;
this.height=height;
}
Person.prototype.hobby = function(){
return 'watching movies';
}
var boy = new Person('keith',180);
var girl = new Person('rascal',153);
console.log(boy.name); //'keith'
console.log(girl.name); //'rascal'
console.log(boy.hobby===girl.hobby);//true(6)原型对象的属性不是对象实例的属性,对象实例的属性是继承自
构造函数定义的属性,因为构造函数内部有一个this关键字,来指向
要生成的对象实例,对象实例属性, 其实就是构造函数内部定义的属性.
所以只要你修改原型对象上的属性和方法, 变动会离开体现在所有对象实例上.
(7)当某个对象实例没有该属性或方法时, 就会到原型对象上去查找
如果实例对象自身有某个对象或方法, 就不会去原型对象上查找,
如下,当boy对象实例hobby方法修改时, 就不会在继承原型对象
上的hobby方法了, 不会girl没有修改, 所以它依旧继承原型对象的方法.
function Person(name,height){
this.name=name;
this.height=height;
}
Person.prototype.hobby = function(){
console.log("aaa");
}
var boy = new Person('keith',180);
var girl = new Person('rascal',153);
boy.hobby = function(){
console.log("bbb");
}
boy.hobby(); //bbb
girl.hobby(); //aaa(8).原型链
对象的属性和方法,可能是定义在自身,也可能是原型对象,由于
原型对象本身对于对象实例来说也是对象,它也有自己的原型, 所以形成了
一条原型链(prototype chain),比如a对象是b对象的原型,b对象是c对象的原型
以此类推, 所有对象的原型顶端, 都是object.prototype，即object构造
函数的prototype指向的哪个对象, 而object.prototype也有自己的原型对象,
这个对象就是 "null" 没有任何属性和方法, 而null对象则没有原型.
特点:
a.读取对象某个属性时,javaScript先找对象本身的属性,如果找不到,就去他的原型找,
如果还是找不到,则去原型的原型找,直到object.portotype找不到则返回 undefined.
b.如果对象自身和它的原型定义了同名属性,优先读取对象自身属性,称为 "覆盖"
c.一级级向上找属性, 对性能有影响, 越上层,影响越大,
new 操作符
1.javascript也有new关键字, js中万物皆对象, 为何还要new关键字.
其实js中new关键字不是用来创建一个类的实例对象,而是用于继承,
function Animal(name){
this.name = name;
}
Animal.color = "black";
Animal.prototype.say = function(){
console.log("I'm " + this.name);
};
var cat = new Animal("cat");
console.log(
cat.name, //cat
cat.height //undefined
);
cat.say(); //I'm cat
console.log(
Animal.name, //Animal
Animal.color //back
);
Animal.say(); //not function2.代码解读
1-3 行创建一个函数Animal,并在其this上定义了属性:name,
4 行在Animal对象(Animal本身是函数对象)上定义了一个静态属性:color,并复制"black"
5-7行在Animal函数的属性prototype上定义一个say方法,say输出了this的name值
8行使用new关键字创建了一个新对象cat,
10-14行cat对象常识方位name和color属性,并调用say方法
16-20行Animal对象访问name和color属性,并调用say方法
3.重点解析 new方法做了什么?
js引擎在执行new 这行代码的时候,做了很懂工作,伪代码如下
var obj = {};
obj.__proto__ = Animal.prototype;
var result = Animal.call(obj,"cat"); //显示传递this,和参数到构造函数
return typeof result === 'obj'? result : obj ; //a）__proto__（隐式原型）与prototype（显式原型）
每个对象都有__proto__属性, 但只有函数对象才有prototype属性.
b ) 首先会创建一个空对象obj, 把obj的__proto__指向Animal的原型对象
prototype, 此时便简历了obj对象的原型链:
obj -> Animal.prototype -> object.prototype -> null
c）在obj对象执行空间调用构造函数并传递参数"cat"
这里这个obj就是构造函数里的this对象，this指向的就是obj;
d ) 判断返回值 如果无返回值或者返回非对象值, 则将obj作为新对象, 否则返回值
坐位新对象,
4.了解new运行机制后,cat就是d过程的返回值 表, 他有一个原型链,
cat上新增了一个新的属性: name
5.再次参照上面的代码分析
(1)cat.naem 在过程c 中obj作为this,传递到构造函数,构造产生name属性,
因此cat.name就是obj.name
(2)cat.color cat首先在自身找color,没有则言责原型链查找,我们仅在Animal
对象是哪个定义color,没有再其原型链上定义, 因此找不到
(3)cat.say() 首先找自身,没有,找原型链Animal的prototype属性定义了say
因此可以再原型链是上找到say方法
(4)Animal.color 对于Animal来说它本身是一个对象,因此他在访问属性也遵守
上述查找规则, 所以他能找到
(5)Animal.name 先查找自身naem 但这个name不是我们定义的name,
而是这个函数对象内部本身就存在这个属性,一般情况下,函数对象在产生内置name
属性会将函数名作为赋值(仅函数对象).
(6)Animal.say() Animal在自身查找, 没有,沿着原型链查找,
这是Animal函数对象的原型链
Animal的原型对象是Function.prototype
原型链: Animal -> Function.prototype -> Objecct.prototype -> null
在Animal原型链上并没有找到,say方法, 因为Animal的prototype
只是Animal的一个属性, 并不是它的原型对象,
Animal的原型对象是Function.prototype
(7)所有实例化的对象,他们的__protp__都指向构造函数的prototype属性
只要有一个实例对象修改其中的内容, 其他的实例对象也会跟这改变.
(8)根据上面的知识实现面向对象
function Point(){
this.xpos = 0;
this.ypos = 0;
}
Point.prototype.set_pos = function(x,y){
this.xpos = x;
this.ypos = y;
}
Point.prototype.get_posy = function(){
return this.ypos;
}
var p1 = new Point();
var p2 = new Point();
p1.set_pos(10,20);
p2.set_pos(100,200);
console.log(p1.get_posy());
console.log(p2.get_posy());类的继承(原型实现)
1.继承就是父类有的方法或属性, 子类继承后其方法和属性子类也可以使用的.
2.继承实现方法: A类有个prototype, 类B也有个prototype
把类A的prototype的内容 复制(浅复制) 给类B的prototype,
这样的话,类A和类B公用了这个prototype
3.首先定义一个人类
var Person = function(){};
Person.prototype.set_name = function(name){
this.naem = name; //设置姓名
};
Person.prototype.set_age = function(age){
this.age = age; //设置年龄
};4.定义一个男人类, 继承自人类, 有两种做法
(1)男人类.prototype = Person.prototype;
但是这样会造成一个问题:这样赋值就是引用赋值 (浅赋值),
导致这两个prototype指向的是同一个对象, 如果子类修改一个
方法属性, 父类的也会跟着改变, 显然是不行的.
(2)new出来的是新的实例,会把原来的prototype拷贝过来
这样就可以扩展自己的方法了, 实际上这个prototype的__ptoto还是
指向父类的prototype, 而prototype则共享__ptoto__里的属性方法，
扩展子类prototype的时候,不影响父类ptototype, 应为是new出来的, 他的
__proto__才指向父类prototype， ptototype只是共享这个方法属性.
//定义一男人类
var Man = function(){};
//做法(1)
//做法(2)
var Super = function(){};
Super.prototype = Person.prototype;
Man.prototype = new Super();
//这里就是继承
Man.prototype.set_sex = function(sex){
this.sex = sex;
}
console.log(Super.prototype);
console.log(Man.prototype);
console.log(Man.prototype.__proto__);
var m = new Man();
//使用父类方法
m.set_name("小王");
m.set_age(10);
//使用子类方法
m.set_sex(0);
console.log(m);(3) 只要你扩展自己方法,和父类同名,就会隐藏父类方法，
因给根据原型链原则, 查找方法属性 先到实例本身进行查找 然后原型对象
这个原型其实就是他的父类.
Man.prototype.set_name = function(name){
console.log("子类重写该方法");
}(4) 如果要调用父类的函数, 使用父类的ptototype 把子类实例传给父类方法
Man.prototype.set_name = function(name){
person.prototype.set_name.call(name);
console.log("子类重写该方法");
}(5)Class实现 可以继承 也可以继承
function Class(param){
var new_class = function(){};
//如果有要继承的父类
if(param.extend != null){
var Super = function(){};
Super.prototype = param.extend.prototype;
new_class.prototype = new Super();
}
//遍历参数 把内容添加到新对象里
for(var key in param){
if(key == "extend"){
continue;
}
new_class.prototype[key] = param[key];
}
return new_class;
}(6)使用Class函数 实现继承和 扩展方法属性
//Student学生类 传入参数表
var Student = Class({
//继承自 Person
extend: Person,
//定义方法
set_class: function(classa){
console.log("set_class",classa);
},
//定义属性
name: "学生类",
});
//实例化对象
var s = new Student();
s.set_class(12312);
console.log(s.name);闭包
1. 看一段闭包代码
function a(){
var n = 0;
function inc(){
n++;
console.log(n);
}
inc(n);
inc(n);
}
a(); //输出1 输出22.再 看一段闭包代码
function a(){
var n = 0;
this.inc = function(){
n++;
console.log(n);
};
}
var c = new a();
c.inc(); //1
c.inc(); //23.闭包 有权访问另一个函数作用域内的遍历都是闭包, Inc函数访问
构造函数a里面的遍历n,所以形成一个闭包
4.匿名函数,lambda表达式,闭包区别:
从功能行上说他们是一个东西, 只是不同语言的不同称呼罢了,
它们都是匿名函数, 若匿名函数捕获了一个外部变量,它就是闭包.
qq交流群:140066160
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网页题目：JavaScript高级部分-创新互联
浏览地址：http://6mz.cn/article/dhicpi.html