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>

第二步:利用原型属性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 · 访问量 9856
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览