第八节 构造函数

一、构造函数模式


// 工厂函数模式

functionPerson(name,age){

varobj={};

obj.name=name;

obj.age=age;

obj.sayHello=function(){

console.log("My name is"+this.name,"I am "+this.age+" years old");

}

returnobj;

}

varp1=Person("chengxiaohui",18);

p1.sayHello();

================================

// 构造函数模式

functionPerson(name,age){

this.name=name;

this.age=age;

this.sayHello=function(){

console.log("My name is"+this.name,"I am "+this.age+" years old");

}

}

// 多了一个new

varp1=newPerson("chengxiaohui",18);

p1.sayHello();

构造函数模式和工厂函数模式的区别?

1、执行的时候

普通函数执行Person函数

构造函数模式是通过new 执行,那Person就是一个类了

函数执行的返回值(p1)就是Person这个类的一个实例

2、在函数代码执行的时候

相同点:

都是形成一个私有作用域,然后形参赋值->预解析(变量提升)->代码从上向下执行

不同点:

在代码执行之前,不用自己手动创建对象,浏览器会默认创建一个对象数据类型的值(这个对象其实就是当前类的一个实例)

this代表的就是当前的实例,然后把属性名和属性值赋值给当前的实例

最后浏览器会默认把创建的这个对象返回

// 创建一个数组

var ary=[ ];//字面量方式创建

var ary2=new Array();//构造函数创建

// 无论通过哪种方式去创建,ary和ary2都是Array这个类的实例

1、JS中所有的类都是函数数据类型,他通过new执行变成一个类,但是本质上他也是一个普通函数。

2、在构造函数模式中,类中(函数体)出现的this.xxx=xxx中的this是当前类的一个实例

3、p1和p2都是Person这个类的实例,所以都拥有sayHello这个方法,但是不同实例之间的方法是不一样的,实例和实例之间是单独的个体,所有的私有属性不是同一个。

console.log(p1.sayHello===p2.sayHello);//false

构造函数里面代码执行的时候的不同点

// 构造函数模式

function Person(name, age) {

  //在构造函数里,浏览器会默认给你创建一个对象

  //var obj = {};

  obj.name = name;

  obj.age = age;

  obj.sayHello = function () {

    console.log("My name is" + this.name, "I am " + this.age + " years old");

  }

  //浏览器默认返回了

  //return obj;

}

// 多了一个new

var p1 = new Person("chengxiaohui", 18);

var p2 = new Person("zhanghuan", 19);

p1.sayHello();

构造函数执行的时候不传参数可以省略()

function Fn() {

}

//没有写调用的小括号,但是依然会执行这个函数

var f1 = new Fn;

//作为普通函数执行必须要加小括号

Fn();

this的问题:在类中的出现的this.xxx=xxx中的this都是当前类的实例,而某一个属性值(方法),方法中的this需要看方法执行的时候,前面是否有点,才能知道this指向谁

function Fn(name, age) {

  // 这个this指的是f1

  this.name = name;

  this.age = age;

  this.sayHello = function () {

    //这里的this要看这个函数执行的时候才知道

    console.log(this)

  }

}

var f1 = new Fn("chengxiaohui", 18);

f1.sayHello();//this 指的是f1

var f2=f1.sayHello;

f2();//this指的是window

类有普通函数的一面,当函数执行的时候,var num其实只是当前形成的私有作用域中的私有变量而已,他和我们的f1这个实例没有任何的关系

function Fn(name, age) {

  //创建的变量

  var num;

  this.name = name;

  this.age = age;

  this.sayHello = function () {

    console.log(this)

  }

}

var f1 = new Fn("chengxiaohui", 18);

f1.sayHello();

var f2=f1.sayHello;

f2();

构造函数返回值的情况

默认类中给返回了一个对象

如果写了return,return的是基本数据类型的话,还是返回那个默认对象

如果写了return,return的是引用数据类型,返回的就是return的那个东西

instanceof

检测某一个实例是都属于这个类(引伸用途:检测数据类型)语法:实例 instanceof 类

console.log(f1instanceofFn);

console.log(f1instanceofObject)

f1和f2都是Fn这个类的一个实例,都拥有name和sayHello两个属性,但是这两个属性是各自的私有属性

functionFn(name){

this.name=name;

this.sayHello=function(){

console.log(this)

}

}

varf1=newFn("chengxiaohui");

varf2=newFn("zhanghuan");

二、原型

构造函数模式中拥有了类和实例的概念,并且实例和实例之间是相互独立的-->实例识别如何将一个私有属性提升为公有属性呢?

functionFn(name){

this.name=name;

}

//放在原型上成了公有属性

Fn.prototype.sayHello=function(){

console.log("I can say hello~");

}

varf1=newFn("chengxiaohui");

varf2=newFn("zhanghuan");

需要焊死在脑子里的三句话

1、每一个函数数据类型都有一个天生自带的属性:prototype(原型),这个属性值是一个对象数据类型

2、在prototype上浏览器天生给他加了一个constructor属性,属性值是当前函数(类)本身

3、每一个对象也天生自带一个属性:__proto__,属性值是当前实例所属类的原型

所有的函数:普通函数、类(内置类,自定义类)都是Function的实例,Function 和Object 都是Function的实例

所有的函数身上都有一个prototype 和__proto__


画图解析

Object是JS中所有对象数据类型的基类(最顶层的类)

f1 instanceof Object->true因为f1通过__proto__可以向上查找,不管有多少级,最终都会找到Object上

三、原型链查找机制

f1.hasOwnProperty("x")

1、通过对象.属性名的方式获取到属性值的时候,首先在对象的私有属性上进行查找,如果私有属性上有,就是私有的这个

2、如果私有属性没有,则通过__proto__找到所属类的原型(类的原型上定义的属性和方法都是当前实例的公有属性和方法)

3、如果原型上也没有,则继续通过原型的__proto__继续向上查找,一直到Object.prototype为止

这种查找机制我们就叫做原型链模式!

四、习题

function Fn(){

    this.x=100;

    this.y=200;

    this.getX=function(){

        console.log(this.x);

    }

}

Fn.prototype.getX=function(){

    console.log(this.x);

}

Fn.prototype.getY=function(){

    console.log(this.y);

}

var f1=new Fn;

var f2=new Fn;

console.log(f1.getX==f2.getX);

console.log(f1.getY==f2.getY);

console.log(f1.__proto__.getY==Fn.prototype.getY);

console.log(f1.__proto__.getX==f2.getX);

console.log(f1.getX===Fn.prototype.getX);

console.log(f1.constructor);

console.log(Fn.prototype.__proto__.constructor);

f1.getX();

f1.__proto__.getX();

f2.getY();

Fn.prototype.getY();

============================

function fun(){

    this.a=0;

    this.b=function(){

        alert(this.a);

    }

}

fun.prototype={

    b:function(){

        this.a=20;

        alert(this.a);

    },

    c:function(){

        this.a=30;

        alert(this.a)

    }

};

var my_fun=new fun();

my_fun.b();

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容