对象、原型、继承

对象

想到对象,首先做如下创建:

var p1 = {
    name: 'xyx',
    age: 22,
    sayname: function(){
      console.log(this.name);
    }
};
p.sayname();//xyx

可是如果要创建很多个,则要重复以上代码很多次,现创建一个函数,通过调用函数来创建对象:

工厂模式

function people(name,age){
    var p = {
        name: name,
        age: age,
        sayname: function(){
            console.log(this.name);
        }
    };
    return p;//引用类型,返回地址
}
var p1 = people("aa",11);
    p1.sayname();//aa
var p2 = people("bb",11);
    p.sayname();//bb

构造函数模式

function people(name,age){
    this.name = name,
    this.age = age,
    this.sayname = function(){
        console.log(this.name);
        }
    };
var p1 = new people("aa",11);
    p1.sayname();//aa
console.log( p1 instanceof people ); //true

注:
1.people是个函数, 当 new people()的时候就会把people做为构造函数,构造对象。
2.用people创建对象后,people函数里的this代表 people {name: "aa", age: 11}.
3.instanceof的作用是判断p1是不是people的实例

原型方式
1.函数也是对象,对象是有属性和值的,任何一个函数都有prototype这个属性,这个属性的值也是对象,叫原型对象
2.当创建一个对象后,该对象拥有创建者赋予的所有功能。同时该对象还有个额外的内部属性,指向构造函数的原型对象。
3.把所有对象使用的公共资源放在原型对象。
4.原型属性:prototype;对象属性:__proto __

原型结构图

//创建一个Cake函数
function Cake(color,meterial){
  this.color = color;
  this.meterial = meterial;
}
//为Cake创建原型对象
  Cake.prototype = { 
      other: '蜡烛', 
      sayname: function(){ 
       console.log("我是"+this.color+this.meterial);
      }
  }
var c1 = new Cake("红色","五仁");
c1.sayname();//我是红色五仁

对于c1和cake存在以下关系:

Cake.prototype===c1.__proto__;//Cake {}
Cake.__proto__;//function (){}
Cake.constructor;//Function() { [native code] }
Cake.prototype.__proto__ === c1.__proto__.__proto__;//Object {}
c1.prototype;//undefinded  对象没有prototype属性
c1.constructor === Cake.prototype.constructor;//function cake(){}

下面有这样一段例子:

//先找cake函数里的sayname,如果没有则是prototype里的sayname函数
function Cake(color,meterial){
    this.color = color;
    this.meterial = meterial;
    this.sayname= function(){
        console.log(this.color+this.meterial);
    }
}
        
Cake.prototype.sayname = function(){
    console.log("我是"+this.color);
}
var c1 = new Cake("红色","五仁");//new一个c1对象后,cake里面的this指向c1
    c1.sayname();//红色五仁

继承

原型链对象继承:

function People(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}

People.prototype.say = function(){
    console.log(this.name + "在说话");
}
    
Student.prototype = new People();//继承people原型链创建的方法
Student.prototype.constructor = Student;

function Student(name,age,sex,grade){
    People.call(this,name,age,sex);
    this.grade = grade;
}
var s1 = new Student("小妹",11,"女",88);

数据继承(用于默认参数)

var p1 = {name: '小灰', age: 1},
    p2 = {name: '小呆', sex: 'male'};
var newObj1 = $.extend(obj1, obj2); //会把obj2合并覆盖到obj1,obj1被改掉 
var newObj2 = $.extend({}, obj1, obj2); //不会改掉obj1,将obj1、obj2合并到{}

es6实现

完成一个类Box,实例化的时候给他传入一个数组,使Box的实例支持for in循环;

class Box{
    constructor(array) {
        // 判断传入的是否是数组
        if(Array.isArray(array)){
            this.arr = array;// ...
        }else{
            this.arr = [];
        }
    }

    toCircle() {
        for(var i=0; i< this.arr.length; i++){
            console.log(this.arr[i]);
        }
    }
}
var a = new Box([1,2,3])
a.toCircle();

注:判断obj是否是数组的几种方法
1.Array.isArray(obj);调用数组的isArray方法
2.obj instanceof Array;判断对象是否是Array的实例
3.Object.prototype.toString.call(obj) ===‘[object Array]’;
Object.prototype.toString方法会取得对象的一个内部属性[[Class]],然后依据这个属性,返回一个类似于[object Array]的字符串作为结果,call用来改变toString的this指向为待检测的对象
4.obj.constructor===Array;判断obj的原型链上是否有array方法
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容

  • 博客内容:什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,401评论 3 12
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 2,986评论 4 14
  • 理解 javascript 的原型链及继承 以上所有的运行结果都是 true; 三种构造对象的方法: 通过对象字面...
    你期待的花开阅读 1,500评论 0 3
  • 生日后的第一个周一,我就开始忙碌起来啦。因为数学老师有事去杭州出差三天,而我又是数学课代表为此担任起了重任。不过...
    BabyCherry阅读 366评论 0 0
  • 简书如一个很久不见的朋友,许久不写文。突然想记录点什么,然后随性相聚。 从一个小小的基层,只想着努力去把工作做好。...
    梦鹿是一只猫阅读 124评论 0 0