对象和继承

最新推荐文章于 2022-08-08 19:22:59 发布

山-栀

最新推荐文章于 2022-08-08 19:22:59 发布

阅读量123

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/j20020212/article/details/111667949

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

声明一个对象
- 遍历对象
创建对象
继承

声明一个对象

第一种

var student = {
        name:"chenxin",
        age:18
    };
    student.sex = "男";   //往对象里面添加一个新属性sex
    // student.name = "liu";  修改对象的名字
    console.log(student);

第二种

     var student = new Object();  //声明一个名字sutdent等于一个新的对象
     student.name = "chenxin";		//往student里面添加属性并且赋值
     student.age = 18;
     console.log(student);
/*********************************************/     
     student.sayname = function(){    //给sutdent.sayname封装一个事件，方法
         console.log(this.name);		//打印student里面的name	
     };
     student.sayname();					//调用一次

遍历对象

for(var i in student){
        console.log(student[i]);
    //对于变量i来说他只是一个变量 不能用student.i只能用student[i]遍历
        // console.log(student.i);里面找不到东西打印出来undefined
    }

`Object.defineProperty()`

//在一个对象上定义一个新属性或者修改一个已经存在的属性
var student = new Object();
     student.name = "chenxin";
     console.log(student);
     
    Object.defineProperty(student,"age",{
        enumerable:false, //age这个属性是否能被遍历 false不能
        writable:false,   //age这个属性是否能被重新赋值  默认false
        configurable:true, //age这个属性是否能被修改 true能  默认是false
        value:22,
    });
    delete student.age;   //尝试删除student里面的age
    console.log(student.age);

`Object.defineProperties()`

//复数形势  在多个对象上定义多个新属性或者修改多个已经存在的属性
var student = new Object();
     student.name = "chenxin";
     student.age = 18;
     console.log(student);

    Object.defineProperties(student,{
        name:{
          value:"liuzhuning"
        },
        age:{
            value:15
        }
    })
//注意这个函数只更改属性里面的值如下图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HbvxMpgi-1608950035713)(images/image-20201225092800858.png)]

`vue的v-model实现`

/*监听输入事件input框输入值下面h1实时改变*/
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="text" id="input">
<h1 id="h1"></h1>
</body>
<script>
    function $(id){					//封装一个简易事件$()方便下面的找到input，h1
        return document.querySelector(id);
    }
    var input = $("#input");
    var h1 = $("#h1");
    var obj = {name:"chenxin"};

    Object.defineProperty(obj,"name",{
        get(){
            return obj.name;      //传出obj.name的值给set()里面的v
        },
        set(v){
            input.value = v;
            h1.innerText = v;
        }
    });
    input.oninput = function(){   //监听向input里面输入值触发事件
        obj.name = this.value;
    }

</script>
</html>

创建对象

第一种

//工厂函数
function AllStudent(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        return obj;
    }
    var student1 = AllStudent("lzn",18);
    var student2 = AllStudent("cx",18);

    console.log(student1);
    console.log(student2);

第二种

//构造函数方法
    function Student(name, age) {
        this.name = name;
        this.age = age;
        this.sayName = function(){
            console.log(this.name);       //return  chenjiang
        };
        this.getFunctionName = function(){
            console.log(this.constructor.name)    //return Student
        }
    }
    var student = new Student("chenjiang", 22);   //构造函数写的需要在下面new一次
    student.getFunctionName();

`instanceof`

//判断函数
function Student(name,age){
        this.name = name;
        this.age = age;
        this.sayname = function(){
            console.log(this.name);
        };
    };
    var student1 = new Student("chenxin",18);
    //判断实例student1是否属于Student这个对象
    console.log(student1 instanceof Student);  //true
	/****万物皆对象*****/
    console.log(student1 instanceof Object);   //true

实例修改不会覆盖原型同名的属性

function Student() {
    }
    Student.prototype.name = "chenxin";
    var student = new Student();
    student.name = "lzn";
    console.log(Student.prototype.name);
    console.log(student.name)

判断属性是否在原型链上

function Student(){
    }
    Student.prototype.name = "chenxin";
    var student1 = new Student();
    console.log('name' in student1);  //返回true
    //直接判断实例student1里面是不是有name
    function check(obj,attr){
        return !obj.hasOwnProperty(attr) && (attr in obj);
        //hasOwnProperty返回一个布尔值 判断自身属性是否存在
    }
    //切记一定是判断属性 属性是否存在
    console.log(check(student1,'name')); //返回true
    console.log(check(student1,'aaa'));  //返回false

原型指向问题

function Student() {
    }

    var student = new Student();

    Student.prototype = {
        sayName() {
            console.log(666)
        }
    };
    student.__proto__ = Student.prototype;  //让new出来的实例student等于大写Student原型才能console.log(666);
    student.sayName();

继承

第一种

//把父亲所有的属性，自身的prototype全部继承给儿子的prototype
function Parent(name,age){
        this.name = name;
        this.age = age;
        this.arr = ['chenxin'];
    }
    Parent.prototype.sayName = function(name){
        console.log(name);
    };
    function Son(code,name,age){
        Parent.call(this,name,age);
        this.code = code;
    }
    Son.prototype = Parent.prototype;
    console.log(new Son('php','lzn',18))

山-栀

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对象和继承

文章目录声明一个对象遍历对象`Object.defineProperty() ``Object.defineProperties() ``vue的v-model实现`创建对象`instanceof`实例修改不会覆盖原型同名的属性判断属性是否在原型链上原型指向问题继承声明一个对象第一种var student = { name:"chenxin", age:18 }; student.sex = "男"; //往对象里面添加一个新属性sex
复制链接

扫一扫