记录学习---01JavaScript高级---动态页面-工厂模式和自定义构造函数的区别-构造函数和实例化对象的关系-原型以及原型的相关知识
动态页面
- 页面由html+css+Js
- 向服务器发送请求，服务器那边没有页面，是动态生成，返回给客户端的
工厂模式（利用函数调用返回对象）和自定义构造函数的区别
共同点 都是函数，可以创建对象，都可以传入参数
工厂模式
- 函数名小写
- 函数中有new
- 有返回值
- new之后的对象时当前的对象
- 直接调用函数来创建对象
自定义构造函数
- 函数名首字母大写
- 函数中没有new
- 没有返回值
- this是当前的对象
- 利用new来创建对象
构造函数和实例化对象的关系
实例对象时通过构造函数来创建
实例对象会指向他的构造函数—错误的
总结
实例对象是通过构造函数创建的–创建的过程叫实例化
如何判断对象是不是这个数据类型
- 通过构造器的方式—实例对象.构造器 = 构造函数名字----实例对象.constructor =构造函数名字
- 对象 instanceof 构造函数名字
尽可能使用第二种方式来识别
原型
作用 数据共享，节省内存空间
同一个构造函数，创建多个实例，这些实例中的方法都是不一样的，虽然显示的是一样的，会占用大部分空间
实例对象中有__proto__这个属性，叫原型，也是一个对象，这个属性是给浏览器使用的，不是标准的属性------>__ proto__ ------->原型对象
构造函数中有prototype这个属性，叫原型，也是一个对象，这个属性是给程序员使用的，是标准的属性------>prototype------->原型对象
实例对象的__proto__和构造函数中的prototype相等
又因为实例对象时通过构造函数来创建的，构造函数中元原型对象prototype
实例对象的__proto__指向了构造函数的原型对象prototype
通过原型来添加方法
代码实例
function Person(name,age) {
this.name=name;
this.age = age;
}
Person.prototype.eat=function() {
console.log('吃吃吃');
}
var per1 = new Person('小红',20);
var per2 = new Person('小绿',28);
per1.eat();
per2.eat();
//这两个eat是同一个函数
Person.prototype.eat=function() {
console.log('吃吃吃');
}
这个实在构造器中添加的方法，在实例化的对象中是没有这个方法的，但是可以调用使用
Person.prototype.eat=function() {}这个里面的this就是实例对象，和直接在构造函数中写方法，然后实例化对象的this是一样的，也是实例对象，谁调用this就是谁
Person.prototype在构造函数的原型对象中
构造函数和实例对象和原型对象之间的关系
function Person(sex,age) {
this.sex = sex;
this.age = age;
}
Person.prototype.sayHi=function () {
console.log(123);
};
var per = new Person('man',20);
console.dir(per);//实例对象
console.dir(Person);//构造函数的名字
实例对象中有两个属性（这两个属性是通过构造函数来获取的），__proto__这个属性
构造函数中没有sex和age的两个属性
构造函数可实例化对象
构造函数中有一个属性叫prototype，是构造函数的原型对象
构造函数的原型对象prototype中有一个constructor构造器，这个构造器指向的就是自己所在的原型对象所在的构造函数
实例对象的原型对象__proto__指向的是该构造函数的原型对象
构造函数的原型对象prototype中的方法是可以被实例对象直接访问的
总结
需要共享的数据写在构造函数中，需要共享的数据写在原型中
简单的原型写法
function Student(uname,age,sex){
this.name = uname;
this.age = age;
this.sex = sex;
}
Student.prototype = {
// 手动改造构造器的指向
constructor:Student,
'height':180,
'width':50,
eat: () {
console.log(132125);
}
}
var stu = new Student('xiaoixoa',20,);
console.dir(Student);
console.dir(stu);
将局部变量转换为全局变量
函数的自调用(function() {})()
(function (win) {
var num = ;
win.num = num;
} )(window);
console.log(num);
静态成员的创建
function Text(name){
this.name = name;
}
Text.version = '1.1';
var text = new Text();
text只能访问到name
不能访问到静态成员version
instanceof 是判断实例是否是由某个构造函数创建的，无论他的原型对象的构造器的指向是否发生改变
一些注意点
实例对象的方法是可以相互调用的
原型对象中的方法是可以相互调用的
实例对象使用的属性或者方法，现在实例中找，找到直接使用，找不到则，去创造该实例对象的构造函数的原型对象中找(实例对象的__proto__指向的原型对象prototype中找)，找到了则使用，找不到则报错
为内置对象添加原型方法
静态成员不能使用对象的方法来进行调用
静态成员使用构造函数来使用
复习
自定义构造函数创建对象的4件事
1.在内存中申请一块空闲的空间,存储创建的对象
2.this就是当前实例化的对象
3.设置对象中的属性和方法(为对象添加属性和方法,为属性和方法赋值)
4.把创建后的对象返回
面向对象的编程思想:根据需求,抽象出相关的对象,总结对象的特征和行为,把特征变成属性，行为变成方法,然后定义(js)构造函数,实例化对象,通过对象调用属性和方法,完成相应的需求.—编程的思想
function(){}.bind(that)-----强制转换函数中的this指向----->指向为that
键盘按下事件
onkeydown
获取键值 事件对象.keyCode----ASCII码