JS-创建对象,原型链

在JS中除了基本数据类型,其他皆是对象,接下来介绍创建对象的四种方法,以及原型链的原理.

创建对象

一.创建单个对象

- ①字面量创建对象

let obj = {
            uname:'zhangsan',
            age:'18',
            eat:function() {
                console.log('吃');
            }
        }

总结:

    1.字面量是内置构造函数的语法糖写法
    2.字面量用{}定义
    3.内部定义属性语法 多个属性方法之间用，隔开
    属性名：属性值 
    4.内部定义方法
    方法名：function() {}
    5.一个对象代表一个实例对象

- ②内置构造函数创建对象

let obj = new Object()
        obj.uname = '张三'
        obj.age = 18
        obj['score'] = 120
        obj.eat = function () {
            console.log('eat');
        }
        obj['drink'] = function () {
            console.log('drink');
        }

        obj.eat()
        obj.drink()
        console.log(obj['uname'])

总结

    1.通过new关键字调用构造函数创建对象
    2.定义一个实例对象

创建单个对象总结
字面量方法可以在对象外添加属性和方法:

    1.添加属性
    对象.属性 = 属性值
    对象['属性'] = 属性值
    2.添加方法
    对象.方法名 = function() {}
    对象['方法名'] = function() {}

二.创建多个对象

- ③工厂方式创建对象

 function Student(uname, age) {
            let obj = new Object()
            obj.uname = uname
            obj.age = age
            obj['grade'] = 8
            obj.eat = function () {
                console.log('eat');
            }
            return obj
        }

        let zs = new Student('zhangsan', 18)
        zs.score = 150
        zs['gender'] = 'nv'
        zs.drink = function () {
            console.log('喝');
        }
        zs['play'] = function () {
            console.log('玩');
        }
        console.log(zs);
        zs.eat()

总结

    1.将内置构造函数创建对象封装成为一个函数，该函数称为工厂
    2.工厂方式创建对象要在函数内部返回内置构造函数创建的对象
    3.添加属性和方法
    1）在函数内部添加
            ①添加属性
             obj.属性名 = 属性
             obj['属性名'] = 属性
             ②添加方法
             obj.方法名 = function() {}
             obj['方法名'] = function() {}
    2)在函数外部添加
        ①添加属性
        实例对象.属性名 = 属性
        实例对象['属性名'] = 属性
        ②添加方法
        实例对象.方法名 = function() {}
        实例对象['方法名'] = function() {}
    4.缺点
    使用工厂方法创建对象时，在函数内部是调用内置构造函数Object来创建对象的，所创建的对象
    类型都是object，无法区分多种不同类型的对象。
    在使用时必须用return返回对象

④.自定义构造函数创建对象

function Student(uname, age) {
            this.uname = uname
            this.age = age
            this.eat = function () {
                console.log('chi');
            }
        }

        let zs = new Student('zhangsan', 18)
        zs.score = 150
        zs['gender'] = '男'
        zs.drink = function () {
            console.log('张三喝酒');
        }
        zs['play'] = function () {
            console.log('张三玩游戏');
        }
        console.log(zs);

总结

    1.自定义构造函数是工厂方式的简写
    2.与工厂方式区别
        1)没有显式地创建对象
        2)没有返回创建的对象
        3)对象中的this指创建的实例对象
    3.添加属性和方法
        1)函数内部添加属性和方法
        添加属性:this.属性 = 属性
        添加方法:this.方法 = 方法
        2)函数外部添加属性和方法
        添加属性:实例对象.属性名 = 属性
        实例对象['属性名']  = 属性
        添加方法:构造函数名.prototype.方法名 = function() {}
    4.构造函数名是帕斯卡命名法 名词 首字母大写
    5.调用时通过new调用
    6.当函数内部没有写返回值时，以普通形式调用函数返回值为undefined，以构造函数形式调用
    返回值为该函数对象

原型对象,对象原型,原型链

function Student(uname, age) {
            this.uname = uname
            this.age = age
        }

        // 原型对象
        Student.prototype.gender = '男'
        Student.prototype.eat = function () {
            console.log('吃苹果');
        }
        let zs = new Student('张三', 18)
        console.log(zs);
        console.log(zs.gender);
        zs.eat()

总结

    1.原型对象:构造函数的原型,也是一个对象
    2.constructor:原型对象有属性为constructor指回构造函数
    3.对象原型:实例对象有一个指针__proto__指向原型对象 可以访问原型对象身上的属性和方法
    4.原型链:构造函数的原型也是一个实例对象也有__proto__,当构造函数的实例对象在构造函数
    的原型中没有找到对应的属性或方法的时候,原型通过__proto__指针继续向上查找上一级构造
    函数的原型是否有目标属性或方法.原型链的顶级构造函数是object,Object的原型的__proto__
    指针指向null
    5.作用:使用原型对象添加的属性和方法存储在内存的堆中,当创建新的实例对象时,实例对象的
    __proto__指针指向构造函数的原型对象,不用在堆中重复创建相同的属性和方法,不会造成内存
    浪费

原型链