JavaScript面向对象

面向过程: 所有事情亲力亲为
面向对象: 找到可以做某件事情的对象, 让对象来完成

创建对象

通过默认的Object这个类(构造函数)来创建var per = new Object();
通过字面量来创建对象(语法糖) var per = {};
先自定义构造函数, 再通过构造函数来创建对象

Object类(构造函数)来创建

// 1.通过默认的Object这个类(构造函数)来创建
var obj = new Object();
// 2.在JavaScript中创建好一个对象之后, 可以动态的给这个对象添加属性和方法
obj.name = "lnj";
obj.age = 13;
obj.say = function () {
    console.log("hello");
};
// 3.在JavaScript中, 只要给一个对象添加了属性和方法之后, 就可以通过这个对象访问对应的属性和方法
console.log(obj.name);
console.log(obj.age);
obj.say();

通过字面量来创建对象(语法糖)(先创建后添加)

var obj = {}; // 相当于 var obj = new Object();
// 2.在JavaScript中创建好一个对象之后, 可以动态的给这个对象添加属性和方法
obj.name = "zq";
obj.age = 13;
obj.say = function () {
    console.log("hello");
};
// 3.在JavaScript中, 只要给一个对象添加了属性和方法之后, 就可以通过这个对象访问对应的属性和方法
console.log(obj.name);
console.log(obj.age);
obj.say();

通过字面量来创建对象(创建的同时添加属性和方法)

// 注意点:
// {}中的属性名称和值之间使用冒号隔开, 属性和属性之间使用逗号隔开
var obj = {
    name: "lnj",
    age: 18,
    say: function () {
        console.log("hello");
    }
};
// 2.在JavaScript中, 只要给一个对象添加了属性和方法之后, 就可以通过这个对象访问对应的属性和方法
console.log(obj.name);
console.log(obj.age);
obj.say();

this关键字

在JavaScript的每一个函数中都有一个this关键字
this关键字的值是当前调用函数的那个对象.谁调用了当前的函数, this就是谁obj.say(),那么say函数内的this就是obj,通过this.属性名称就可以调用obj的属性名称
注意点:
- 默认情况下所有的函数都是通过window调用的

工厂函数创建对象

无论通过Object来创建对象, 还是通过字面量来创建对象都存在一个弊端
如果创建的多个对象的属性和方法名称一样, 那么每次创建都需要重新编写一次.所以我们可以通过工厂函数来创建对象

// 工厂函数
function createPerson(name, age) {
    // 1.通过Object创建一个空对象
    // var obj = new Object();
    var obj = {};
    // 2.动态的给空对象添加属性和方法
    obj.name = name;
    obj.age = age;
    obj.say = function () {
        console.log("hello");
    }
    // 3.将函数中创建的对象返回给调用者
    return obj;
}
var obj1 = createPerson("lnj", 13);
var obj2 = createPerson("zq", 18);
console.log(obj1);
console.log(obj2);

console.log(typeof obj1); // object
console.log(obj1.constructor); // ƒ Object() { [native code] }

构造函数创建对象

构造函数和普通函数的区别
- 构造函数的函数名称首字母必须大写
- 构造函数必须使用new来调用
构造函数本质上是工厂函数的简化

以下是自定义的一个构造函数,灰色部分为省略代码
function Person(name, age){
    //var obj = {};
   //此时this就是指obj
    this.name = name;//obj.name = name
    this.age = age;
    this.say = function{
    console.log("hello");
  }
    // return obj;
}

new Person("xxz", 13);做了什么事情?
1.会在构造函数中创建一个空的对象
2.将创建好的空对象赋值给this
3.将创建好的对象返回给调用者

instanceof

判断一个对象是不是由某构造函数创建出来的,我们可以用instanceof函数

var obj = new Person("lnj", 13);
console.log(obj);

console.log(typeof obj); // object
console.log(obj.constructor); // ƒ Person(name, age) {}

// 判断obj对象是否是Person构造函数创建出来的
// console.log(obj.constructor === Person); // 不推荐

// 在企业开发中如果想判断某个对象时候是某个构造函数创建出来的
// 可以使用 对象名称 instanceof 构造函数名称, 来判断
console.log(obj instanceof Person); // true


function Student(name, age, score) {
    this.name = name; // obj.name = name;
    this.age = age;
    this.score = score;
}
var obj2 = new Student("zs", 11, 99);
console.log(obj2 instanceof Person);//false
console.log(obj2 instanceof Student);//true

构造函数创建对象的性能问题

用构造函数创建一个对象,会在内存开辟一块内存空间,创建100个就开辟100块内存空间
检验办法

var obj1 = new Person("lnj", 13);
obj1.say();

var obj2 = new Person("zq", 18);
obj2.say();

// 这里的===是在判断两个函数的地址是否相同
console.log(obj1.say === obj2.say);  //false

以上返回false说明地址不同,说明开辟了两块存储空间

解决方案一:在外面定义函数

function say(){
  console(this.name,this.age);
}
function Person(name, age){
    this.name = name;
    this.age = age;
    this.say = say;
}
var obj1 = new Person("lnj", 13);
obj1.say();

var obj2 = new Person("zq", 18);
obj2.say();

// 这里的===是在判断两个函数的地址是否相同
console.log(obj1.say === obj2.say);  //true

在外部定义函数的弊端:方法多,那么外部函数就多,函数太多不便于阅读,也会导致全局作用域名称匮乏

解决方案二:将方法封装在一个对象内部

var fns = {
    say: function() {
        console.log(this.name, this.age);
    },
    eat: function () {
    console.log("eat");
    }
}
function Person(name, age){
    this.name = name;
    this.age = age;
    this.say = fns.say;
    this.eat = fns.eat;
}
var obj1 = new Person("lnj", 13);
obj1.say();

var obj2 = new Person("zq", 18);
obj2.say();

// 这里的===是在判断两个函数的地址是否相同
console.log(obj1.say === obj2.say);  //true

解决方案三:将函数放到构造函数的原型对象内(企业开发推荐)

prototype

每一个构造函数内有一个属性叫prototype,指向一个对象,就是构造函数的原型对象
解决方案二就是把方法放在一个对象中,这里prototype指向的就是对象,我们可以把它放在构造函数的原型对象内
使用规则:
- 私有成员（一般就是非函数成员）放到构造函数中
- 共享成员（一般就是函数）放到原型对象中
- 如果重置了 prototype 记得修正 constructor 的指向

// 定义了一个构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.say = function () {
    console.log(this.name, this.age);
};

// console.log(Person.prototype);

var obj1 = new Person("lnj", 13);
obj1.say();

var obj2 = new Person("zq", 18);
obj2.say();

// 这里的===是在判断两个函数的地址是否相同
console.log(obj1.say === obj2.say); // true

构造函数----对象----原型对象的三角关系

构造函数的prototype指向构造函数的原型对象
构造函数的原型对象的constructor属性指向构造函数
对象通过构造函数创建,对象的____proto____(proto前后有两条下划线)属性指向创建它的构造函数的原型对象

原型链

既然构造函数的原型对象也是个对象,那么原型对象也有____proto____属性,属性指向创造原型对象的构造函数,这样就形成了原型链
原型链有个顶端,顶端就是Object构造函数,Object构造函数的原型对象指向null

属性和方法的调用顺序

对象访问属性时,会先在当前对象中查找有没有该属性,当前对象没有,就在它的原型对象中查找,如果原型对象没有,就按照原型对象的____proto____依次向上查找,直到找到null还没有找到则输出undefined
方法也是如此,会依次向上查找,找不到则报错
注意点:
- 在直接通过对象访问属性时,不会修改原型中的属性
- 通过对象.属性名称赋值的时候会新增一个属性

自定义原型对象

自定义原型对象也是一个对象,所以我们可以自定义构造函数的原型对象
注意点:
- 自定义的原型对象一定要保证构造函数原型对象和实例对象的三角恋关系
- 自定义原型对象一定要设置constructor为所属的构造函数

 // 自定义一个构造函数
    function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      Person.prototype = {
        constructor: Person,
        say: function () {
            console.log(this.name, this.age);
        }
    };

    var p = new Person("lnj", 13);
    p.say();

    console.log(p.__proto__.constructor);

对象的公有和私有属性和方法

默认情况下对象的属性和方法都是公有的
局部变量和局部函数是指定义在函数内的变量和函数,由于构造函数也是函数,所以定义在构造函数内的函数就是局部函数,不供外界访问的

 function Person() {
        this.name = "lnj";
        this.age = 13;
        this.say = function () {
            console.log(this.name, this.age);
            // console.log(num);
        };
        //其实构造函数也是一个函数, 所以在构造函数中直接定义的变量, 就是局部变量, 外界就不能访问
        var num = 666;  // 私有属性
        function demo() { // 私有函数
            console.log("demo");
        }
    }
    var p = new Person();
    console.log(p.num);//undefined
    p.demo();//报错

实例属性方法和静态属性方法

通过构造函数创建出来的对象我们称之为实例对象
通过对象才能访问到的属性和方法我们称为实例属性和方法
静态的属性和方法就是不需要通过对象就能访问的属性和方法, 就是静态属性和方法
通过构造函数就能够直接访问的属性和访问, 我们就称之为静态属性和方法

 function Person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function () {
            console.log(this.name, this.age);
        }
    }
    /*
    // 这里通过new Person()创建出来的p对象我们就称之为实例
    var p = new Person("lnj", 13);
    // 这里通过p.xxx访问的属性, 我们就称之为实例属性
    console.log(p.name);
    console.log(p.age);
    // 这里通过p.xxx()访问的方法, 我们就称之为实例方法
    p.say();
    */
    // 将属性和方法添加给了构造函数, 这里添加的属性和方法将来就只能通过构造函数来访问
    // 这里添加的属性和方法就是静态的属性和方法
    Person.type = "人";
    Person.eat = function () {
        console.log("eat");
    };

利用原型链实现继承(组合继承引导一)

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

function Student(score){
  this.score = score;
}
Student.prototype = function() {
  console.log(this.score)
}
// 修改Student的原型为Person对象
// 由于直接创建了父类对象作为子类的原型对象, 所以在指定原型对象的时候就必须指定父类的参数
// 但是在企业开发中每个子类对象的参数都可能不一样, 所以这种方案不行
Student.prototype = new Person();
Student.prototype.constructor = Student;
// var stu1 = new Student();
var stu2 = new Student("zs", 18, 99);
console.log(stu1.name);//报错

这种方法的弊端就是父类创建的子类的name和age都相同,而实际情况每个人的名字都不会相同,所以这种方法不可行

bind call apply函数

bind方法的作用
修改函数内部的this的, 但是不会调用这个函数, 会返回一个新的函数给我们
call方法的作用
修改函数内部的this的, 但是会调用这个函数
apply方法的作用
修改函数内部的this的, 但是会调用这个函数
call和apply的区别
传递参数的形式不同, 如果是call那么参数依次用逗号隔开即可, 如果是apply那么参数都要放到一个数组中

var obj = {
  name : "xxz";
}
function test(a,b){
  console.log(a,b)
  console.log(this)
}

var fn = test.bind(obj,10,20)
fn();//10,20,obj这个对象

test.call(obj,10,20)//10,20,obj这个对象
test.apply(obj,[10,20])//10,20,obj这个对象

利用构造函数实现继承(引导二)

通过子类调用call函数调用父类的构造函数来解决父类创建的子类的name和age都相同的问题

function Person(name, age){
  this.name =name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log("say");    
}
function Student(score, name, age){
  this.score = score;
  Person.call(this, name, age);
}
var stu = new Student(99, "zs", 18);
console.log(stu.score);
console.log(stu.name);
stu.say();//报错

Person.call(this, name, age);这种方式仅仅是借用了父类的构造函数动态的给子类添加属性, 没有其它任何的关系,所以在子类中是不能使用父类原型中的方法的, 所以也不推荐

组合继承(终极版本)

利用call借用父类构造函数实现了动态设置属性,但却存在子类不能调用父类方法的问题
将Student的原型对象修改为Person的实例对象,实现方法的继承
将Student的原型对象的constructor修改为Student构造函数,实现三角链关系

function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log("say")
}
function Student(score){
  this.score = score
  Person.call(this,name,age)
}
Student.prototype = new Person();
Student.prototype.constructor = Student;

js多态

function Dog(name) {
    this.name = name;
    this.brak = function () {
        console.log("汪汪叫");
    }
}

function Cat(name) {
    this.name = name;
    this.brak = function () {
        console.log("喵喵叫");
    }
}

var dog = new Dog("wc");
var cat = new Cat("mm");

function eat(animal) {
    animal.brak();
}
eat(dog);
eat(cat);

对象的增删改查

增: 对象.属性属性不存在就是增

删: delete 对象.属性

改: 对象.属性属性存在就是改

查:

对象.属性或者对象[属性] 都是对对象属性的操作
查找属性是否属于某个对象或者是否在对象的原型上
- 属性 in 对象
  - 特点: 会先在当前对象中找有没有, 如果没有会去当前对象的原型对象上找有没有, 一直找到null都没有就会返回false
- 对象.hasOwnProperty("属性")
  - 特点:只会在当前对象上查找, 如果当前对象上有就返回true, 如果当前对象上没有就返回false, 不会去当前对象的原型对象上查找

对象遍历

利用高级for循环就可以直接遍历对象
for(var key in obj){
}
会将对象中的每一个属性依次取出来赋值给key
对象中有多少个属性,循环就会执行多少次

对象的浅拷贝和深拷贝

对象的浅拷贝,浅拷贝拷贝的是对象的地址,修改拷贝的对象的值,原对象的值也会被修改
对象的深拷贝,是对象的值拷贝,修改拷贝的对象的值,原对象的值不会被修改

浅拷贝

function Person(name, age, dog) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log(this.name, this.age);
    };
    this.dog = dog;
}
var p1 = new Person("lnj", 13, {
    name: "wc",
    age: "3"
});
var p2 = p1;

深拷贝

function Person(name, age, dog) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log(this.name, this.age);
    };
    this.dog = dog;
}
var p1 = new Person("lnj", 13, {
    name: "wc",
    age: "3"
});
// 2.对象属性的逐一赋值
var p2 = new Person();
copy(p1, p2);
function copy(o1, o2){
    for(var key in o1){
        o2[key] = o1[key];
    }
}

注意点:
- 默认情况下对象之间的直接赋值都是浅拷贝
- 默认情况下一个对象的属性如果是基本数据类型, 那么都是深拷贝
- 如果对象的属性包含了引用数据类型, 才真正的区分深拷贝和浅拷贝

最后编辑于：2018.11.24 16:41:33

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,504评论 6赞 496
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,434评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,089评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,378评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,472评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,506评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,519评论 3赞 413
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,292评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,738评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,022评论 2赞 329
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,194评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,873评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,536评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,162评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,413评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,075评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,080评论 2赞 352

JavaScript面向对象

创建对象

Object类(构造函数)来创建

通过字面量来创建对象(语法糖)(先创建后添加)

通过字面量来创建对象(创建的同时添加属性和方法)

this关键字

工厂函数创建对象

构造函数创建对象

instanceof

构造函数创建对象的性能问题

解决方案一:在外面定义函数

解决方案二:将方法封装在一个对象内部

解决方案三:将函数放到构造函数的原型对象内(企业开发推荐)

prototype

构造函数----对象----原型对象的三角关系

原型链

属性和方法的调用顺序

自定义原型对象

对象的公有和私有属性和方法

实例属性方法和静态属性方法

利用原型链实现继承(组合继承引导一)

bind call apply函数

利用构造函数实现继承(引导二)

组合继承(终极版本)

js多态

对象的增删改查

增: 对象.属性 属性不存在就是增

删: delete 对象.属性

改: 对象.属性 属性存在就是改

查:

属性 in 对象

对象.hasOwnProperty("属性")

对象遍历

对象的浅拷贝和深拷贝

浅拷贝

深拷贝

推荐阅读更多精彩内容

增: 对象.属性属性不存在就是增

改: 对象.属性属性存在就是改