js custom constructor Optimization

Dog class how to construct optimization?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/html">
    function Person(name,age,sex){
        // 1. 自动创建空对象,把对象地址给了this,this → 新对象
        //  var this = new Object();

        // 2. this 给空对象绑定属性和行为
        this.name = name;
        this.age = age;
        this.sex = sex;

        // 3. 返回this
        return this;
    }

    var p = new Person();
</script>
<script>
    function Dog(name,age,dogFriends) {
        // 属性
        this.name = name;
        this.age = age;
        this.dogFriends = dogFriends;

        // 行为
        this.eat = function (someThing) {
            console.log(this.name + "吃" + someThing);
        };
        this.run = function (someWhere) {
            console.log(this.name + "跑" + someWhere);
        }
    }
</script>
</body>
</html>

Step: optimization parameter passing parametric data transfer format using json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/html">
    function Person(name,age,sex){
        // 1. 自动创建空对象,把对象地址给了this,this → 新对象
        //  var this = new Object();

        // 2. this 给空对象绑定属性和行为
        this.name = name;
        this.age = age;
        this.sex = sex;

        // 3. 返回this
        return this;
    }

    var p = new Person();
</script>
<script>
    function Dog(options) {
        // 属性
        this.name = options.name;
        this.age = options.age;
        this.dogFriends = options.dogFriends;

        // 行为
        this.eat = function (someThing) {
            console.log(this.name + '吃' + someThing);
        };
        this.run = function (someWhere) {
            console.log(this.name + '跑' + someWhere);
        }
    }
    var options = {"name":"小花","age":1,"dogFriends":["小草","小可"]};
    var smallDog = new Dog(options);
    console.log(smallDog.name,smallDog.age,smallDog.dogFriends);
    smallDog.run('操场');
</script>
</body>
</html>

Step Two: Using the prototype property prototype share the same inventory release function, to save memory space. If you are created when an object is initialized, and each object will create a function that waste of space

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/html">
    function Person(name,age,sex){
        // 1. 自动创建空对象,把对象地址给了this,this → 新对象
        //  var this = new Object();

        // 2. this 给空对象绑定属性和行为
        this.name = name;
        this.age = age;
        this.sex = sex;

        // 3. 返回this
        return this;
    }

    var p = new Person();
</script>
<script>
    function Dog(options) {
        // 属性
        this.name = options.name;
        this.age = options.age;
        this.dogFriends = options.dogFriends;
    }

    Dog.prototype.eat = function (someThing) {
        console.log(this.name + '吃' + someThing);
    };
    Dog.prototype.run = function (someWhere) {
        console.log(this.name + '跑' + someWhere);
    };
    var options = {"name":"小花","age":1,"dogFriends":["小草","小可"]};
    var smallDog = new Dog(options);
    console.log(smallDog.name,smallDog.age,smallDog.dogFriends);
    smallDog.run('操场');
</script>
</body>
</html>

All things are placed directly in the prototype object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/html">
    function Person(name,age,sex){
        // 1. 自动创建空对象,把对象地址给了this,this → 新对象
        //  var this = new Object();

        // 2. this 给空对象绑定属性和行为
        this.name = name;
        this.age = age;
        this.sex = sex;

        // 3. 返回this
        return this;
    }

    var p = new Person();
</script>
<script>
    function Dog(options) {
        this._init(options);
    }

    Dog.prototype = {
        _init:function(options){
            this.name = options.name;
            this.age = options.age;
            this.dogFriends = options.dogFriends;
        },
        eat : function (someThing) {
            console.log(this.name + '吃' + someThing);
        },
        run : function (someWhere) {
            console.log(this.name + '跑' + someWhere);
        }
    };
    var options = {"name":"小花","age":1,"dogFriends":["小草","小可"]};
    var smallDog = new Dog(options);
    console.log(smallDog.name,smallDog.age,smallDog.dogFriends);
    smallDog.run('操场');
</script>
</body>
</html>

Exactly how to look at the specific needs

Published 214 original articles · won praise 112 · Views 9351

Guess you like

Origin blog.csdn.net/KaiSarH/article/details/103983285