JavaScript面向对象

作者: AuglyXu | 来源:发表于2018-11-03 20:02 被阅读0次

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

创建对象

通过默认的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];
    }
}

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

JavaScript面向对象

创建对象

Object类(构造函数)来创建

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

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

this关键字

工厂函数创建对象

构造函数创建对象

instanceof

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

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

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

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

prototype

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

原型链

属性和方法的调用顺序

自定义原型对象

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

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

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

bind call apply函数

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

组合继承(终极版本)

js多态

对象的增删改查

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

删: delete 对象.属性

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

查:

属性 in 对象

对象.hasOwnProperty("属性")

对象遍历

对象的浅拷贝和深拷贝

浅拷贝

深拷贝

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

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