JSカスタムコンストラクタの最適化

Dogクラスはどのように最適化を構築するには?

<!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>

ステップ: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>

ステップ2:メモリ空間を節約するために、prototypeプロパティプロトタイプの共有と同じ在庫放出機能を使用します。あなたが作成している場合はオブジェクトが初期化され、各オブジェクトは、関数を作成しますときにスペースの無駄

<!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>

すべてのものは、プロトタイプオブジェクトに直接配置されています

<!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>

正確にどのように特定のニーズを見て

公開された214元の記事 ウォンの賞賛112 ビュー9351

おすすめ

転載: blog.csdn.net/KaiSarH/article/details/103983285