web前端面试之js继承与原型链(码动未来)

web前端面试之js继承与原型链(码动未来)

3.2.1、JavaScript原型,原型链 ? 有什么特点?

每个对象都会在其内部初始化一个属性,就是prototype(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去,也就是我们平时所说的原型链的概念。

关系:instance.constructor.prototype = instance.__proto__

特点:JavaScript对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变。

当我们需要一个属性的时,Javascript引擎会先看当前对象中是否有这个属性, 如果没有的话,就会查找他的Prototype对象是否有这个属性,如此递推下去,一直检索到 Object 内建对象。

    function Func(){}

        Func.prototype.name = "Sean";

    Func.prototype.getInfo = function() {

      return this.name;

     }

var person = new Func();//现在可以参考var person = Object.create(oldObject);

    console.log(person.getInfo());//它拥有了Func的属性和方法//"Sean"

     console.log(Func.prototype);// Func { name="Sean", getInfo=function()}


3.2.2、Javascript如何实现继承?

1、构造继承

2、原型继承

3、实例继承

4、拷贝继承

原型prototype机制或apply和call方法去实现较简单,建议使用构造函数与原型混合方式。

         function Parent(){

             this.name = 'wang';

        }

         function Child(){

             this.age = 28;

        }

    Child.prototype = new Parent();//继承了Parent,通过原型

         var demo = new Child();

        alert(demo.age);

    alert(demo.name);//得到被继承的属性


3.2.3、JavaScript继承的几种实现方式?

参考:构造函数的继承http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html,

非构造函数的继承http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html;


3.2.4、javascript创建对象的几种方式?

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON;但写法有很多种,也能混合使用。

1、对象字面量的方式   

    person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

2、用function来模拟无参的构造函数

    function Person(){}

var person=new Person();//定义一个function,如果使用new"实例化",该function可以看作是一个Class

    person.name="Mark";

    person.age="25";

    person.work=function(){

    alert(person.name+" hello...");

    }

    person.work();

3、用function来模拟参构造函数来实现(用this关键字定义构造的上下文属性)

    function Pet(name,age,hobby){

        this.name=name;//this作用域:当前对象

       this.age=age;

       this.hobby=hobby;

       this.eat=function(){

        alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");

        }

    }

var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象

maidou.eat();//调用eat方法

4、用工厂方式来创建(内置对象)

     var wcDog =new Object();

    wcDog.name="旺财";

     wcDog.age=3;

     wcDog.work=function(){

alert("我是"+wcDog.name+",汪汪汪......");

      }

     wcDog.work();

5、用原型方式来创建

    function Dog(){     }

Dog.prototype.name="旺财";

     Dog.prototype.eat=function(){

alert(this.name+"是个吃货");

     }

     var wangcai =new Dog();

     wangcai.eat();

6、用混合方式来创建

    function Car(name,price){

      this.name=name;

      this.price=price;

    }

     Car.prototype.sell=function(){

alert("我是"+this.name+",我现在卖"+this.price+"万元");

      }

var camry =new Car("凯美瑞",27);

    camry.sell();


3.2.5、Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?

hasOwnProperty

javaScript中hasOwnProperty函数方法是返回一个布尔值,指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性;该属性必须是对象本身的一个成员。

使用方法:

object.hasOwnProperty(proName)

其中参数object是必选项。一个对象的实例。

proName是必选项。一个属性名称的字符串值。

如果object具有指定名称的属性,那么JavaScript中hasOwnProperty函数方法返回 true,反之则返回 false。


3.2.6、谈谈This对象的理解。

this总是指向函数的直接调用者(而非间接调用者);如果有new关键字,this指向new出来的那个对象;在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent中的this总是指向全局对象Window;


3.2.7、new操作符具体干了什么呢?

(1)创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。

(2)属性和方法被加入到 this 引用的对象中。

(3)新创建的对象由 this 所引用,并且最后隐式的返回 this 。

QQ技术交流群:815302226



web前端面试之js继承与原型链(码动未来)_第1张图片

你可能感兴趣的:(web前端面试之js继承与原型链(码动未来))