第七课时

发布于 2024-09-07 17:38:19 字数 7527 浏览 0 评论 0 收藏 0

上节回顾：

1. switch
2. while/do...while
- 一般情况下面，如果条件判断是数字的比较 ==<> ， for 循环优先。
- 如果是非数值相关的比较循环， while 优先
3. function 函数
4.代码内存解析
- 闭包
  - a.程序永远是先定义后执行
  - b.执行永远从上之下
  - c.函数定义的话在堆（只是一个地址而已）
  - d.函数调用的时候，就会有自己的堆和栈（闭包）

知识点：

1、object 对象

new 关键字代表的是新开辟一块内存空间
没有被引用的内存空间，会在适当的时候被销毁
- 两句代码含义等同
  - var person = new Object() ;
  - var person = {};
访问对象的属性除了用对象引用 .属性 key 以外，还可以使用对象引用 [属性 key]

new 原理详细解析

无论什么时候，只要创建一个新函数，就会根据一组特定的规则为该函数创建一个 prototype 属性，这个属性指向函数的原型对象。
在默认情况下，所有原型对象都会自动获得一个 constructor （构造函数）属性，这个属性包含一个指向 prototype 属性所在函数的指针（就是指向新创建的函数）。
通过这个构造函数（原型对象的构造函数），可以继续为原型对象添加其他属性和方法。
当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。 ECMA-262 第 5 版管这个指针叫 [[Prototype]] 。脚本中没有标准的方式访问 [[Prototype]] ，但 Firefox 、 Safari 和 Chrome 在每个对象上都支持一个属性 __proto__ ；而在其他实现中，这个属性对脚本是完全不可见的。不过，要明确的真正重要的一点就是，这个连接存在于实例和构造函数的原型对象之间，而不是存在于实例和构造函数之间

new 创建对象的步骤

创建一个新的对象
将构造函数的作用域赋给新对象
执行构造函数的代码，为这个新对象添加属性
返回新对象

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log(this.name);
    };
}

function createPerson(P) {
    // 创建一个新对象
    var o = new Object();
    // 获取传递给 Person 函数的参数
    var args = Array.prototype.slice.call(arguments, 1);
    // 新对象的__proto__属性指向 Person 的原型对象
    o.__proto__ = P.prototype;
    // Person 的原型对象的 constructor 指向 Person
    P.prototype.constructor = P;
    // 把 Person 构造函数的作用域赋给新对象
    // 给这个新对象添加属性（name,age,say）
    P.apply(o, args);
    // 返回这个新对象
    return o;
}

var p = createPerson(Person, 'wang', 35);

2、面向对象的程序设计

function 构造器
- 共同点:
  - 动态创建一块内存空间，闭包
- 不同点:
  - 函数调用是没有办法拿到空间的地址的，而且这块地址是一块临时地址，执行完函数之后，就会销毁
  - new 开辟内存空间，把这块空间的地址返回，这块空间就有可能长期的被引用
prototype 原型
- 通过原型使通过同样一个构造器所 new（创建） 出来的对象具有相同的属性和行为
- prototype 本质就是一个对象
foreach
this 指代当前创建的这块内存 this.name=name 指代当前内存中的这个 name 属性接收外界传过来的值
继承

多种构造函数

传统的创建对象


var person = new Object();

person.name = “lancer”;

person.age = 24;

person.job = “UI”;

person.sayName = function(){

alert(this.name);

}

person.sayName();

工厂模式


function createPerson(name,age,job){

var o = new Object();

o.name = name;

o.age = age;

o.job = job;

o.sayName = function(){

alert(o.name);

}

return o;

}

var person1 = createPerson(“lancer”,24,”UI”);

person1.sayName();

构造函数


function Person(name,age,job){

this.name = name;

this.age = age;

this.job =job;

this.sayName = function(){

alert(this.name)

}

}

var person1 = createPerson(“lancer”,24,”UI”);

person1.sayName();

原型模式


function Person(){

}

Person.prototype.name =”lancer”;

Person.prototype.age =24;

Person.prototype.job = “UI”;

Person.prototype.sayName = function(){

alert(this.name)

}

var person1 = new Person();

person1.sayName();

var person2 = new Person();

person2.name =”lara”

person2.sayName();

简单原型模式


function Person(){

}

Person.prototype = {

name : “lancer”,

age : 24,

job : “UI”,

sayName : function(){

alert(this.name)

}

};

var person1 = new Person();

person1.sayName();

构造函数和原型模式


function Person(name,age,job){

this.name = name;

this.age = age;

this.job =job;

}

Person.prototype = {

constructor :Person,

sayName : function(){

alert(this.name)

}

};

var person1 = new Person(“lancer”,”24″,”UI”);

person1.sayName();

动态原型模式


function Person(name,age,job){

this.name = name;

this.age = age;

this.job =job;

}

if(typeof this.sayName !=”function”){

Person.prototype = {

constructor :Person,

sayName : function(){

alert(this.name)

}

};

}

var person1 = new Person(“lancer”,”24″,”UI”);

person1.sayName();

稳妥构造函数


var Person = function(name,age,job){

var O = new Object();

O.sayName = function(){

alert(name);

};

return O

}

var person1 = Person(“lancer”,24,”UI”);

person1.sayName();