JS之对象、原型、原型链

客官°小女子只卖身不卖艺 2022-05-19 00:38 227阅读 0赞

# 一：对象的声明方式 #

**1、字面式声明对象**

如下:

> var ohj=\{
> 
> 属性名称:属性值,
> 
> 方法名称:function()\{
> 
> //函数执行体
> 
> \}
> 
> \}  
>

**2、new 操作符+Object 声明对象**

如下:

> var obj=new Object();
> 
> obj.属性名称=属性值;
> 
> obj.方法名称=function()\{
> 
> //函数执行体
> 
> \}

**3、构造函数声明对象**

如下:

> function test(\[参数列表\])\{
> 
> this.属性名称=属性值;
> 
> this.方法名称=function()\{
> 
> //函数执行体
> 
> \}
> 
> \}
> 
> var obj=new test(参数);

**4、工厂方式声明对象**

如下:

>    function createObject(nam,age)\{  
>        var obj=new Object();  
>        obj.name=name;  
>        obj.age=age;  
>        obj.run=function()\{  
>            return this.name+this.age  
>        \};  
>        return obj;  
> \}
> 
> var   obj1=createObject(‘zhangsan’,100);
> 
> var   obj2=createObject(‘lisi’,200);

**5、原型模式声明对象**

> function test()\{
> 
> test.prototype.属性名称=属性值;
> 
> test.prototype.方法名称=function()\{
> 
> //函数执行体 var obj=new test();
> 
> \}
> 
> \}

**6、混合模式声明对象**

如下：

>   
> function test(参 1，参 2)\{
> 
> this.属性名称 1=参 1;
> 
> this.属性名称 2=参 2; \}
> 
> test.prototype.方法名称=function()\{
> 
> //执行代码
> 
> \}  
> var obj=new test(参 1，参 2);

**补充：对象的遍历**

js遍历对象的属性和方法

>     var ren={};
>     ren.name="张三";
>     ren.age=18;
>     
>     ren.demo=function () {
>         document.write('ren')
>     };
>     
>     for (var i in ren){
>         alert(ren[i]);//弹出属性和方法的内容
>     }

# 二：原型与原型链 #

![70][]

1、凡是通过 new function() 创建的对象都是函数对象，其他的都是普通对象

2、js 中所有的函数对象都有一个 prototype 属性，这个属性引用了一个对象， 即原型对象，也简称**原型**。

普通对象没有 prototype,但有\_\_proto\_\_属性  
3、js 在创建对象(不论是普通对象还是函数对象)的时候，都有一个叫做 \_\_proto\_\_的内置属性，

用于指向创建它的函数对象的原型对象 prototype(即它 的构造函数的原型对象)

5、什么是**原型链**

JS在创建对象的时候(无论什么对象),都有一个叫做\_proto\_的内置属性，

用于指向创建它的的函数对象的原型对象prototype

// 原型：用prototype对象来添加属性和方法
    var peoson=function () {};
    var p=new peoson();//经历了三阶段
    
    //1：var p={};创建对象
    //2: p._proto=person.prototype
    //2：创建对象（初始化对象)
    
    
    
    // 原型链
    var peoson=function () {};
    peoson.prototype.say=function () {
        alert("今天天气很好")
    };
    
    var p=new peoson();
    p.say();
    //分析：p只是一个变量，没有say()方法，于是p从p._proto中找，又因为p._proto=person.prototype
    //而person.prototype中有say方法，故p能调用say方法

# 三：继承 #

**1、原型继承**

>   
>     var a=function()\{\};
> 
>     a.prototype.say()=function()\{
> 
>         alert(“haha”);
> 
>     \}
> 
>     a.prototype.gongzi=500;
> 
>   
>     var b=function()\{\};  
>     b.prototype=new a();  
>     b.prototype.gongzi=1000;  
>     var obj=new b();

注:子元素的成员属性 gongzi 会覆盖父元素。

**2、构造继承**

>   
>    function parents(name)\{
> 
>        this.name=name;  
>        this.say=function()\{  
>           alert(this.name);  
>        \}  
>     \}  
>   function child(name,age)\{  
>        this.pobj=parents;  
>        this.pobj(name);  
>        this.age=age;  
> \}  
> var c=new child(‘lisi’,20);

**3、用call 和 apply实现函数隐式调用**

call和apply可以用来重新定义函数的执行环境，也就是this的指向

语法：call(Obj,\[arg1\]\[arg1\])

//定义一个add 方法
        function add(x, y) {
            return x + y;
        }
    
        //用call 来调用 add 方法
        function myAddCall(x, y) {
            //调用 add 方法 的 call 方法
            return add.call(this, x, y);
        }
    
        //apply 来调用 add 方法
        function myAddApply(x, y) {
            //调用 add 方法 的 applly 方法
            return add.apply(this, [x, y]);
        }
    
        console.log(myAddCall(10, 20));    //输出结果30
      
        console.log(myAddApply(20, 20));  //输出结果40

**可以改变Obj指向从而改变作用域：如下**

var name = '小白';
    
        var obj = {name:'小红'};
    
        function sayName() {
            return this.name;
        }
    
        console.log(sayName.call(this));    //输出小白
    
        console.log(sayName. call(obj));    //输入小红
    
        //我们改变了函数运行的作用域， 通过绑定不同的对象，函数内部 this 也不同。
          最终输入结果才会这样。

**两者传参方式不同:call 是参数列表，apply 是数组**

[70]: /images/20220519/a75f8cd8726e4884a410704f8417af45.png