美文网首页
面向对象2

面向对象2

作者: zh_yang | 来源:发表于2017-09-27 12:32 被阅读0次

    1、apply、call 、bind有什么作用，什么区别

    • 在JS中，这三者都是用来改变函数的this对象的指向的
      • 都是用来改变函数的this对象的指向的。
      • 第一个参数都是this要指向的对象。
      • 都可以利用后续参数传参。
    • 区别
      • bind，返回一个新函数，并且使函数内部的this为传入的第一个参数；若函数还需其他参数需在调用时传入。var fn3 = obj1.fn.bind(obj1);fn3();
      • call方法接收参数列表fn.call(context, param1, param2...)
      • 而apply接收参数数组fn.apply(context, paramArray)

    2、以下代码输出什么?

    var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()

    输出"John:hi!" ,func函数的this指向window对象，func函数赋值给john对象的sayHi方法后并调用，this指向john对象。

    3、下面代码输出什么，为什么

    func() 
function func() { 
  alert(this)
}

    func函数this在函数找不到，就会到func所在的作用域（全局作用域）找，所以this指向顶层全局对象window；也就是当前执行环境是window，alert [object Window]

    4、下面代码输出什么

    document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
//document，点击事件回调方法执行时，this指向document
//window，定时器回调函数执行时，this指向window

    5、下面代码输出什么，why

    var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)

    输出"John",call方法改变func函数的this对象的指向，this指向john对象

    6、 以下代码有什么问题，如何修改

    var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('hello');
  }
}

    问题：在$btn的点击回调函数中，this指向$btn,$btn对象没有showMsg属性，this.showMsg()方法执行时会报错，this.showMsg is not a function

    • 使用bind()方法绑定函数内的this对象
    var module= {
    bind: function(){
      $('.btn').on('click', function(){
         console.log(this) //this指什么
         this.showMsg();
      }.bind(this))
    },
    
    showMsg: function(){
      console.log('hello');
    }
  }
    • 使用中间变量保存this对象
    var module= {
    bind: function(){
      var _this= this;
      $('.btn').on('click', function(){
         console.log(_this) //this指什么
         _this.showMsg();
      })
    },
    
    showMsg: function(){
      console.log('hello');
    }
  }

    7、有如下代码，解释Person、 prototype、__ proto __、p、constructor之间的关联。

    function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log('My name is :' + this.name);
}
var p = new Person("John")
p.sayName();

    通过函数定义了类Person，类（函数）自动获得属性prototype；
    Person的prototype也是一个对象，内部有一个constructor属性，该属性指向Person；
    Penson的实例对象p，有一个内部属性 _proto_，指向类的prototype属性。

    p.__proto__ === Person.prototype
p.__proto__.constructor === Person.prototype.constructor === Person

    8、 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。

    • toString是哪里来的
      • 对象p会在自己的属性和方法找，找到后就返回；
      • 没有找到，通过p的proto属性，找到其类型Person的prototype属性(原型对象)，继续查找，找到就返回；
      • 没有找到，通过prototype的_proto_属性找到Object的prototype属性(任何类的prototype属性本质上都是个类Object的实例,所以prototype也和其它实例一样也有个_proto_内部属性，指向其类型Object的prototype),找到返回。
    • 原型图
    原型链.png
    • 解释什么是原型链
      JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做proto的内置属性，用于指向创建它的函数对象的原型对象prototype。在访问一个对象属性的时候，如果对象本身没有找到这个属性，就会沿着原型链一层一层的寻找。

    9、对String做扩展，实现如下方式获取字符串中频率最高的字符

    var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次

    String.prototype.getMostOften = function(){
  var obj = {}
  for(var i=0; i<this.length; i++){
    var item = this.substr(i,1)
    if(obj[item]){
      obj[item]++
    }else{
      obj[item] = 1
    }
  }
  var num =0,max = null
  for(key in obj){
    if(obj[key]>num){
      num = obj[key]
      max = key
    }
  }
  return max
}
var str = 'ahbbccdeddddfg'
var ch = str.getMostOften()
console.log(ch)

    10、 instanceOf有什么作用？内部逻辑是如何实现的？

    instanceof运算符返回一个布尔值，表示指定对象是否为某个构造函数的实例。instanceof的原理是检查原型链，对于那些不存在原型链的对象，就无法判断。

    var arr = [1, 2, 3];
arr instanceof Array; //true
其实是判断arr.__proto__===Array.prototype
arr instanceof Object; //true
判断arr.__proto__.__proto__===Object.prototype

    11、继承有什么作用?

    继承是指一个对象直接使用另一对象的属性和方法。通过继承，可以使子类共享父类的属性和方法，可以覆盖(重写)和扩展父类的属性和方法，减少内存的使用，提高代码复用性。

    12、 下面两种写法有什么区别?

    //方法1
function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('John', 2)

//方法2
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('Lisa', 27);

    方法1中每个实例的printName方法实际上作用一样，但是每个实例要重复一遍，大量对象存在的时候是浪费内存；
    方法2中把printName方法存放到Person.prototype里，每个实例对象的proto都指向Person.prototype能访问到，减少了对象的使用。

    13、 Object.create 有什么作用？兼容性如何？

    Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。
    可以让另外一个构造函数的 prototype 的 _proto_ 等于这个创建的对象，实现继承。如：

    //Person父类
function Person (name) {
  this.name=name
}
Person.prototype.say = function () {
  console.log('My name is ' + this.name)
}
//Student子类
function Student (name) {
  this.name = name
}
Student.prototype.study = function () {
  console.log('I am studying!')
}
//Student.prototype.__proto__ === Person.prototype
Student.prototype.__proto__ = Object.create(Person.prototype)

var xiaohong = new Student('xiaohong')
console.log(xiaohong.name)
xiaohong.study()
xiaohong.say()

//"xiaohong"
//"I am studying!"
//"My name is xiaohong"

    兼容性：各大浏览器的最新版本（包括IE9）都兼容了这个方法。如果遇到老式浏览器，可以用下面的代码兼容：

    if(!Object.create){
Object.create = function(obj){
    function F(){};
    F.prototype = obj;
    return new F();
}
}
或
if(!Object.create){
Object.create = function(obj){
    var obj1 = {};
    obj1.__proto__ = obj;
    return obj1;
}
}

    14、 hasOwnProperty有什么作用？ 如何使用？

    hasOwnPerperty是Object.prototype的一个方法，返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上。
    使用方法：obj.hasOwnProperty(prop)
    prop：要检测的属性 （字符串 名称或者 Symbol）。

    o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

    15、如下代码中call的作用是什么?

    function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //这里的 call 有什么作用
    this.age = age;
}

    改变构造函数Person内部this对象的指向，指向Male的实例对象，使Male的实例对象可以使用Person的属性。

    16、补全代码，实现继承

    function Person(name, sex){
    // todo ...
}

Person.prototype.getName = function(){
    // todo ...
};    

function Male(name, sex, age){
   //todo ...
}

//todo ...
Male.prototype.getAge = function(){
    //todo ...
};

var ruoyu = new Male('John', '男', 27);
ruoyu.printName();

    function Person(name, sex){
  this.name = name
  this.sex = sex
}

Person.prototype.getName = function(){
  console.log('My name is ' + this.name)
};    

function Male(name, sex, age){
  Person.call(this,name,sex)
  this.age = age
}
Male = Object.create(Person.prototype).constructor
//或Male.prototype.__proto__ = Object.create(Person.prototype)
Male.prototype.getAge = function(){
  console.log('I am ' + this.age)
};

var ruoyu = new Male('Jon', '男', 27);
ruoyu.getName();
//function Person(name, sex){
  this.name = name
  this.sex = sex
}

Person.prototype.getName = function(){
  console.log('My name is ' + this.name)
};    

function Male(name, sex, age){
  Person.call(this,name,sex)
  this.age = age
}
Male = Object.create(Person.prototype).constructor
//或Male.prototype.__proto__ = Object.create(Person.prototype)
Male.prototype.getAge = function(){
  console.log('I am ' + this.age)
};

var ruoyu = new Male('John', '男', 27);
ruoyu.getName();

    相关文章

      网友评论

          本文标题：面向对象2

          本文链接：https://www.haomeiwen.com/subject/fqeyextx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|面向对象2|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！