记录学习---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码

你可能感兴趣的:(前端笔记)