Javascript中的面向对象

什么是对象？

  • 对象是由属性和方法构成
  • 属性, 事物的特征
  • 方法, 事物的行为

创建对象的几种方式

  • 字面量方式
let person = {
  name: "张三",
  age: 11
}
缺点: 代码不能复用
  • 工厂模式
function createPerson(name, age, job){ 
    var o = new Object(); 
    o.name = name; 
    o.age = age; 
    o.job = job; 
    o.sayName = function(){ 
        alert(this.name); 
    }; 
    return o; 
} 
1. 解决了代码复用的问题
2. 但是没有解决对象识别问题, 就是怎么知道一个对象的类型
  • 构造函数模式
    1.函数首字母大写，用于区分构造函数和普通函数
    2.创建对象的过程是由new关键字实现
    3.在构造函数内部会自动创建新对象，并赋值给this指针
    4.自动返回创建出来的对象
function Person(name, age){ 
    //这里会自动创建一个对象，var this = new Object();
    this.name = name; 
    this.age = age; 
    this.sayName = function(){ 
        alert(this.name); 
    }; 
    //返回值
    //不写, 直接返回默认创建的新对象
    //返回this, 直接返回默认创建的新对象
    //返回基本数据类型, 直接返回默认创建的新对象
    //返回的是对象, 直接返回这个对象
    return this; 
} 
var person1 = new Person("Nicholas", 29); 
var person2 = new Person("Greg", 27);
问题: 每个方法都要在每个实例上重新创建一遍, 浪费内存
  • 原型模式
function Person(){ 
} 
Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 
Person.prototype.sayName = function(){ 
    alert(this.name); 
}; 
var person1 = new Person(); 
person1.sayName(); //"Nicholas" 
var person2 = new Person(); 
person2.sayName(); //"Nicholas" 
alert(person1.sayName == person2.sayName); //true
  • 构造函数/原型组合模式(推荐使用)
  1. 构造函数定义实例属性, 原型模式定义方法和共享的属性
  2. 每个实例都会有自己的一份实例属性的副本, 同时又共享着方法的引用, 最大限度节省了内存
function Person(name, age, job){ 
    this.name = name; 
    this.age = age; 
    this.job = job; 
    this.friends = ["Shelby", "Court"]; 
} 
Person.prototype = { 
    sayName : function(){ 
        alert(this.name); 
    } 
} 
var person1 = new Person("Nicholas", 29, "Software Engineer"); 
var person2 = new Person("Greg", 27, "Doctor"); 
person1.friends.push("Van"); 
alert(person1.friends); //"Shelby,Count,Van" 
alert(person2.friends); //"Shelby,Count" 
alert(person1.friends === person2.friends); //false 
alert(person1.sayName === person2.sayName); //true
  • 终极版
function Person(options){
    this._init(options);
}
Person.prototype = {
    options = options | {};
    _init: function(options){
        this.name = options.name; 
        this.age = options.age || 0; 
        this.job = options.job; 
    },
    sayName: function(){
         alert(this.name); 
    }
}

示例: 封装一个矩形
rect.js

//构造函数方式创建对象
        function Rect(options){
            this._init(options);
        }
        Rect.prototype = {
            _init: function(options){
                options = options || {};
                this.root = options.root;
                this.left = options.left || 0;
                this.top = options.top || 0;
                this.width = options.width || 0;
                this.height = options.height || 0;
                this.bgColor = options.bgColor || '#000';
                this.borderRadius = options.borderRadius || 0;
                this.border = options.border;
            },
            reader: function(){
                var rootElement = document.getElementById(this.root);
                var childElement = document.createElement('div');
                rootElement.appendChild(childElement);
                childElement.style.position = 'absolute';
                childElement.style.left = this.left + 'px';
                childElement.style.top = this.top + 'px';
                childElement.style.width = this.width + 'px';
                childElement.style.height = this.height + 'px';
                childElement.style.backgroundColor = this.bgColor;
                childElement.style.border = this.border;
                childElement.style.borderRadius = this.borderRadius;
            }
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>矩形</title>
</head>
<body>
    

    <div id="root"></div>
    <script src="./js/rect.js"></script>
    <script>
        //实例化矩形对象
        var rect = new Rect({
            root:'root',
            left:100,
            top:100,
            width:300,
            height:200,
            bgColor:'red',
            border:'10px solid #000',
            borderRadius:20
        });
        rect.reader();
    </script>

</body>
</html>

效果图


矩形

对象属性

  • 获取或设置属性
定义对象
let person = {
  name: "test"
}
获取属性
console.log(person.name);
console.log(person['name'];
设置属性
person.name = "张三";
person['name'] = "张三";
注: 上面使用了点语法和[]语法获取和设置属性, 另外需要注意一点就是点语法后面不能跟关键字、保留字或数字
  • 清空属性
person = {}; // person对象不再有任何属性
person = null; // person不再是一个对象了
  • hasOwnProperty和in
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.address = "郑州";
let p = new Person("lisi", 11);

console.log(p.hasOwnProperty('name'))    //true
console.log(p.hasOwnProperty('address'));//false

console.log('name' in p);    //true
console.log('address' in p); //true
  • isPrototypeOf和instanceOf
function Person() {
}

let p = new Person();
console.log(Person.prototype.isPrototypeOf(p));  //true
console.log(p.__proto__.isPrototypeOf(p));       //true

console.log(p instanceof Person); //true
  • 获取对象属性名
let person = {
  name:"张三",
  age: 11
}
let keys = Object.keys(person);
console.log(keys); / //['name', 'age']
  • 设置或修改对象中的属性
Object.defineProperty(
    对象, 
    修改或新增的属性名, 
    { 
        value: 修改或新增的属性的值, 
        writable: true/false, // false代表, 不允许修改这个属性值 
        enumerable: false,  // false, 不允许遍历
        configurable: false // false, 不允许删除这个属性
    }
)

对象的静态属性和静态方法

function Person(name, age) {
    this.name = name;
    this.age = age;
    if(!Person.personCount){
        Person.personCount = 0;
    }
    Person.personCount ++;
}

//输出一共创建多少个Person实例对象
Person.printPersonCount = function () {
    console.log(Person.personCount);
}

var p1 = new Person("zhangsan", 11);
var p2 = new Person("lisi", 12);
Person.printPersonCount(); //2

获取对象类型

var obj = {"name": "zhangsan"};
var arr = [1, 2, 4];
console.log(typeof obj);      //object
console.log(obj.toString());  //[object Object]
console.log(typeof arr);      //object, 无法获取正确的对象类型
console.log(arr.toString());  //1,2,4, 无法获取正确的对象类型
console.log(Object.prototype.toString.call(arr));   //[object Array]
console.log(arr.constructor.name); //Array

验证对象类型

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

var p = new Person('lisi', 18);

console.log(p instanceof Person); //true
console.log(p instanceof Object); //true
console.log(p instanceof Array); //false
console.log(p); //Person { name: 'lisi', age: 18 }

原型对象

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

Person.prototype.say = function () {
    console.log("say...");
}

//方式1
console.log(Person.prototype);

//方式2
let p = new Person("lisi", 11);
console.log(p.__proto__);

let o = {
    'study': function () {
        console.log("study...")
    }
}
p.__proto__ = o;
console.log(p.__proto__);

继承

  • 什么是继承?
    通过某种方式让一个对象可以访问到另外一个对象的方法和属性
  • 为什么使用继承?
    避免同一方法多次声明导致内存浪费
function  Person(){
    this.say=function(){
        console.log("你好")
    }
}
var  p1=new  Person();
var  p2=new  Person();
console.log(p1.say == p2.say); //false， 内存浪费

怎么解决？ 把say方法写到他们共同的父类中

Person.prototype.say = function(){ console.log("你好"); }
console.log(p1.say == p2.say);  //true,指向了同一方法，避免了内存浪费
console.log(p1.say == Person.prototype.say); //true
这个地方用到了prototype(原型)对象, 只要在构造函数的原型对象中添加属性和方法, 那么这样的属性和方法就可以被所有的构造
函数的实例所共享, 这里的构造函数的prototype对象称为原型对象

插个小问题
p1, p2的原型对象是谁？
Person创建了p1和p2, 所有Person.prototype就是p1和p2的原型对象
那Person的原型对象是谁?
Function创建了Person, 所以Function.prototype是Person的原型

  • 怎么继承？
  1. 原型链继承
Person.prototype.say = function(){}
缺点: 方法多了会导致代码冗余

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

推荐阅读更多精彩内容