js中自定义对象的解析

这篇文章主要介绍了关于js中自定义对象的解析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

一、对象

　　1.字面量创建对象

var person = {    name: "sun",    age: 18,    work: function () {        console.log(this.name + "is working...");    },    address: {        home: "大屯里xxx路xxx小区xx单元xxx室",        phone: "123456789",    }};person.work();console.log(person.address.home);

登录后复制

　　2.数据描述和存取描述设置

var person = {    age: 18,    address: {        home: "大屯里xxx路xxx小区xx单元xxx室",        phone: "123456789",    }};Object.defineProperties(person, {    name: {        value: "sun",        // 该属性的值，可被读取        writable: true,      // 表示能否修改属性的值，默认值为true        configurable: true,  // 表示能否delete该属性并重新定义，直接在对象上定义的属性默认值为true        enumerable: true     // 表示能否通过for-in枚举，直接在对象上定义的属性默认值为true    },    work: {        value: function(){            console.log(this.name + "is working...");            },        // 通过Object.defineProperty和Object.defineProperties定义属性，        // 如果没有声明writable、configurable、enumerable，它们的默认值都是false    }});person.work();console.log(person.address.home);

登录后复制

　　3.get和set

var circle = {    value: 10,    get girth(){        return 2 * 3.14 * this.R    },    get area(){        return 3.4 * this.R * this.R    },};Object.defineProperty(circle, "R", {    get : function () {        return this.value;    },    set : function (val) {        console.log("半径被修改了！");        this.value = val;    }});circle.R = 100;console.log("girth: " + circle.girth + "area: " + circle.area);

登录后复制

　　4.数据描述和存取描述检查

var circle = {    R: 10,    // __proto__: null,    get area(){        return 3.4 * this.R * this.R    },};Object.defineProperty(circle, "site", {    value: [0, 2.2, 4.1],    // enumerable: true,  // 是否可配置（读取），不设置为true时，Object.keys(circle))和Object.values(circle))将获取不到该键值对});console.log("R" in circle);  // 检查属性console.log(circle.hasOwnProperty("R"));  // 检查自有的属性console.log(circle.propertyIsEnumerable("R"));   // 检查属性是否是可枚举的// Object对象的方法console.log(Object.keys(circle));console.log(Object.values(circle));console.log(Object.getOwnPropertyNames(circle));  // 检查对象自身所有属性console.log(Object.getOwnPropertyDescriptor(circle, "R")); // 得到circle对象关于R属性的描述

登录后复制

二、prototype

　　1.prototype释义

- 每一次创建函数，解析器都会向函数中添加一个属性:prototype- 如果函数作为普通函数调用prototype，没有任何作用- 当该函数以构造函数的形式调用时，它会有一个隐含的属性__proto__指向其原型对象- 每个实例有各自的__proto__指向原型对象的prototype, 也就是原型对象中的属性和方法被调用函数"共享"- 当类的原型对象prototype指向的内存地址发生改变时，已创建实例的__proto__ !== prototype，也就是不会被覆盖。而新创建的实例仍然是__proto__ === prototyp

登录后复制

function Person(name, age) {    this.name = name;    this.age = age;}// Person.prototype.gender = "male";// Person.prototype.sayHello = function () {//     return this.name + ", " + this.age + "years old."// };Person.prototype = {    gender: "male",    sayHello: function () {        return this.name + ", " + this.age + "years old."    }};var p1 = new Person("孙悟空", 2000);p1.sayHello();console.log(Person.prototype);console.log(Person.prototype.constructor === Person);

登录后复制

　　2.prototype与__proto__

function Person() {}var obj1 = { gender: "male"};  // 创建两个内存地址var obj2 = { age: 200 };Person.prototype = obj1;var p1 = new Person();console.log(p1.__proto__ === Person.prototype);console.log(p1.__proto__.gender);console.log(Person.prototype);Person.prototype = obj2;var p2 = new Person();console.log(p2.__proto__.age);console.log(Person.prototype);console.log(p1.__proto__.age);    // undefinedconsole.log(p2.__proto__.gender); // undefinedconsole.log(p1.__proto__ === Person.prototype);  // false，表示当prototype指向的内存地址改变时，已经创建的实例对象的__proto__仍指向原来的内存地址console.log(p2.__proto__ === Person.prototype);

登录后复制

function Person() {}Person.prototype = {name: "xxx", age: 100,};var p1 = new Person();console.log(p1.__proto__.name);Person.prototype = { price: 998,};var p2 = new Person();console.log(p2.__proto__.price);console.log(p1.__proto__.price);  // undefinedconsole.log(p2.__proto__.name);   // undefiendconsole.log(p1.__proto__ === Person.prototype);  // false, 原型对象的内存地址引用已发生改变console.log(p1.__proto__.age);    // __proto__指向的内存地址被保留console.log(p2.__proto__ === Person.prototype);  // true

登录后复制

function Person() {}Person.prototype = { price: 60 };var p1 = new Person();Person.prototype = { price: 998};var p2 = new Person();console.log(p1.__proto__ === Person.prototype);  // 依然是falseconsole.log(p2.__proto__ === Person.prototype);  // true

登录后复制

　　3.prototype之共享性

// prototype非常类似python中的静态属性和静态方法。每个实例都可以访问同一块内存空间。function Person() {}Person.prototype = {price: 60};var p1 = new Person();var p2 = new Person();console.log(p1.__proto__.price);console.log(p2.__proto__.price);console.log(Person.prototype.price);

登录后复制

　　4.prototype之继承性

// 当访问实例对象的一个属性或方法时，它会先在对象自身中查找，如果有则直接使用；如果没有则在原型对象中继续查找，如果有则直接使用function Person() {}Person.prototype = {price: 60};var p1 = new Person();var p2 = new Person();console.log(p1.price);console.log(p2.price);console.log(Person.prototype.price);

登录后复制

三、类

　　1.类的封装

// 字面量方法(工厂方法) -- 直接在var obj = {}内部写代码，缺点是只实例化一次// 构造函数方法        -- 只用构造函数声明this，缺点是可扩展性差，数据重复// 原型方法           -- 只用prototype声明共有的属性和方法，缺点是实例的数据相同，不满足多态

登录后复制

　　1.混合的构造函数/原型方法

// 最广泛的使用方法function Person(name, age) {    this.name = name;    this.age = age;}// prototype写在外面是为了保证其动态增加公共属性和方法Person.prototype.sayHello = function () {    console.log(this.name + ", " + this.age + " years old.");  // 把共有的属性和方法封装到prototype中};var p = new Person("孙悟空", 2000);p.sayHello();

登录后复制

// 我把它写给Person的属性，让父类也能够访问function Person(name, age) {    Person.group = Person.prototype.group = "西天取经组";    Person.toString = Person.prototype.toString = function (){        console.log("Person: " + Person.group)    };    this.name = name;    this.age = age;    this.sayHello = function () {      console.log(this.name + ", " + this.age + "years old.")    };}var person = new Person("孙悟空", 2000);console.log(person.constructor); // 检查构造器函数console.log(person instanceof Person);  // 检查是否为其原型类person.sayHello();Person.toString();

登录后复制

　　2.动态原型方法

// 也是常用的方法function Person(name, age) {    this.name = name;    this.age = age;    if (typeof Person._initialized === "undefined"){        Person.prototype.sayHello = function () {            console.log(this.name + ", " + this.age + " years old.");        };        Person._initialized = true;    }}var p = new Person("孙悟空", 2000);p.sayHello();

登录后复制

　　3.混合工厂方法

// 混合工厂方法  -- 存在与工厂方法类似的问题，不建议使用function Person(name, age) {    var obj = {};    obj.name = name;    obj.age = age;    obj.sayHello = function () {        console.log(this.name + ", " + this.age + " years old.");    };    return obj}var p = new Person("孙悟空", 2000);p.sayHello();

登录后复制

　　4.再探讨类结构

function Person(name, age) {    // 静态属性    Person.group = "西天取经四人组，暗合金木水火土";    // 静态方法    Person.introduce = function () {        console.log("贫僧自东土大唐而来")    };    // 实例属性    this.name = name;    this.age = age;    // 实例方法，应该写在prototype中    this.say = function () {        console.log("hello, i'm " + this.name);    };    Person.prototype.introduce = Person.introduce; // 此时Person类和其实例都可以使用introduce方法    // 父类使用实例方法    Person.example = Person.prototype.example = function (self) {        self = self || this;        console.log(self.name + " " + self.age);    }}// 在python中，实例可以访问父类的属性和方法，父类也可以使用实例方法// 在java和js中，实例不能调用父类的静态属性和静态方法，父类不能使用实例方法// 如果想让实例和父类共享一个属性或者方法，就只能放到方法区并创建引用var sun = new Person("孙悟空", 2000);Person.introduce();  // 父类调用静态方法sun.say();sun.introduce();     // 实例调用静态方法Person.example(sun); // 父类调用实例方法sun.example();       // 子类调用实例方法// 可见，prototype是父类和实例的沟通桥梁

登录后复制

　　2.自定义类

function Person(name, age) {    this.name = name;    this.age = age;    this.sayHello = function () {      console.log(this.name + ", " + this.age + "years old.")    };}function New(Person) {    return function () {        var obj = {"__proto__": Person.prototype};  // 必须写在这里        Person.apply(obj, arguments);  // arguments同this一样，是默认自带的关键字，用于存储传入的参数        return obj    }}var temp = New(Person);var p1 = temp("孙悟空", 2000);var p2 = temp("猪八戒", 1);p1.sayHello();p2.sayHello();

登录后复制

　　3.类的继承

　　1.拷贝继承字面量对象(实例)

var person = {    name: "Li",    age: 16,    address: {        home: "none",        city: "none",    },    say: function(){        console.log("hello, guy.")    }};var child = {gender:"female",};function extendDeeply (p, c){    var c = c || {};    for (var prop in p) {        if (typeof p[prop] === "object") {            c[prop] = (p[prop].constructor === Array) ? [] : {};            extendDeeply(p[prop], c[prop]);        } else {            c[prop] = p[prop];        }    }}extendDeeply(person, child);console.log(child);child.say();

登录后复制

　　2.call和apply实现对象继承

function Person(name, age) {    this.name = name;    this.age = age;    this.address = {        home: "none",        city: "none",    }}Person.prototype.say = function () {    console.log("hello, guy.")};// 它继承的只是实例对象this，无法继承父类原型prototypfunction Child(name, age) {    Person.call(this, name, age);    this.gender = "female";}var child = new Child("Li", 16);console.log(child);// child.say(); 报错: child.say is not a function.

登录后复制

对象继承的缺点：只继承了实例对象的可访问的属性和方法，没有继承原型

登录后复制

　　3.原型链继承

// 原型链继承function Person() {}Person.prototype.name = "Person";Person.prototype.toString = function () {    console.log(this.name);};function Child(name, age) {    this.age = age;    this.name = name;}Child.prototype = Person.prototype;Child.prototype.constructor = Child;var child = new Child("Li", 16);console.log(child.name + " " + child.age);child.toString();// 其缺点是之继承了原型，没有继承实例

登录后复制

　　4.create实现类继承

function Person(name, age) {    this.name = name;    this.age = age;    this.address = {        home: "none",        city: "none",    }}Person.prototype.say = function () {    console.log("hello, guy.")};function Child(P, name, age) {    function F() {}    F.prototype = new P(name, age);    var c = new F();    return c;}Child.prototype.constructor = Child;  // 无法修正var child = new Child(Person, "Li", 16);console.log(child);console.log(child.name);child.say();console.log(child.constructor);  // 结果为[Function: Person]，构造器指向无法修正console.log(child instanceof Child);  // falseconsole.log(child instanceof Person); // true

登录后复制

　　5.Object.create实现类继承  — 推荐的方式

// Object.create继承，实现原理和上面的create类似// 1.创建父类function Person() {}Person.prototype.sayPerson = function () {    console.log("hello, Person.")};// 2.创建子类function Child(gender) {this.gender = gender;}// 3.create继承// Object.create的第二个参数是属性描述Child.prototype = Object.create(Person.prototype, {    name: {        value: "Li",        writable: true,        enumerable: true,        configurable: true,    },    age: {        value: 16,        writable:true,        configurable:true,        enumerable:true,    },});  // 重写子类prototypeChild.prototype.constructor = Child;  // constructor 修正// 4.在create之后写子类的prototypeChild.prototype.sayChild = function () {    console.log("hello, Child.")};var child = new Child("female");console.log(child);console.log(child.name + " " + child.age);child.sayChild();child.sayPerson();

登录后复制

　　5.组合继承 — 推荐的方式

function Person(name, age) {    this.name =name;    this.age = age;}Person.prototype.toString = function () {    console.log(this.name + " " + this.age);};function Child(name, age, gender) {    Person.call(this, name, age);    this.gender = gender;}Child.prototype = new Person();  // new时不传参数，是为了只继承原型，即Child.prototype = Person.prototype// Child.prototype = Person.prototype;  // 两者等价Child.prototype.constructor = Child;var child = new Child("Li", 16, "female");console.log(child);child.toString();console.log(child instanceof Child);   // trueconsole.log(child instanceof Person);  // true

登录后复制

　　6.继承总结

js继承需要继承两部分内容：　　- 一部分是父类构造函数中的this定义属性和方法，相当于继承初始化的数据　　- 另一部分是父类的prototype，相当于继承实例方法- 要实现this的继承，可以用call(apply)；要实现prtotype的继承，可以用原型链- 要实现两者的继承，可以用this+prototype的组合方式，Object.create本质上也是这种思路

登录后复制

　　7.prototype、constructor和__proto__在继承中的关系

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

 对js中事件模型的解析

如何把js变量值传到php

以上就是js中自定义对象的解析的详细内容，更多请关注【创想鸟】其它相关文章！